Question

我在点击按钮时创建弹出Bootstrap警告框。问题： - 点击弹出窗口未显示它将在页面加载时显示。我想只在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，message，timeout作为参数

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)
});

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

1 个答案: