通过javascript动态引导弹出警告框

Question

我在按钮单击上创建弹出式引导警报框。 问题： - 点击弹出不显示它将显示在页面加载。我只想显示弹出式警报onclick。

这里是我的代码： -

**JS:-** 
function bootstrap_alert(elem, message, timeout) { 
    $(elem).show().html('<div class="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>'); 

    if (timeout || timeout === 0) { 
    setTimeout(function() { 
     $(elem).alert('close'); 
    }, timeout);  
    } 
}; 

<script> 

    $(document).ready(function(){ 
     bootstrap_alert('#item-publish','This message will fade out in 1 second', 1000); 

    }); 

</script> 

**Html:-** 
<a class="btn gray mini mr5" id="item-publish"> 
    <span class="glyphicon glyphicon-globe"></span> 
    Publish 
</a> 

好心建议我任何解决方案。

Answer 1

你bootstrap_alert函数需要ELEM，消息，超时作为参数

function bootstrap_alert(elem, message, timeout) 

，但你不及格ELEM进去，你需要更换这个

bootstrap_alert('This message will fade out in 1 second', 1000) 

与

bootstrap_alert('#item-publish','This message will fade out in 1 second', 1000) 

或放任何你想选择的元素

更新

，而不是试图添加警报动态我将它添加到HTML，但它设置为隐藏

在这里看到：http://jsfiddle.net/au55b990/1/

HTML

<div id="alertBox" class="alert alert-info" style="display:none;"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
    <span class="alertMessage"></span> 
</div> 

<a class="btn gray mini mr5" id="item-publish"> 
    <span class="glyphicon glyphicon-globe"></span> 
    Publish 
</a> 

JS

function bootstrap_alert(elem, message, timeout) {   
    $(elem + " .alertMessage").text(message) 
    $(elem).show().alert() 

    if (timeout || timeout === 0) { 
    setTimeout(function() { 
     $(elem).hide(); 
    }, timeout);  
    } 
}; 

$('#item-publish').click(function() { 
    bootstrap_alert('#alertBox','This message will fade out in 1 second', 1000) 
});