使用javascript显示模态窗口

Question

我想基于javascript中的bool变量显示模式对话框。 最好的方法是将bool变量绑定到某个属性（例如可见性），并且当该变量为true时，将出现模式对话框，如果为false，它将不存在（将显示“背景”站点）。

我将这个引导模板与jquery 1.9.1和bootstrap 3.3.7一起使用。 我在互联网上找到了一些相关主题，我尝试使用它们：

1）首先，我使用了模态对话框div的某些属性，例如可见性，在这里我将使用将输出true或false的代码。 我的意思是使用style="visibility:hidden" / visible ，但是当它设置为visible时，它不会自动出现。

2）使用来自getbootstrap.com的提示： $('#myModal').modal('show')和其他变体出现在加载时或准备好文档时

$(document).ready(function(){
   jQuery.noConflict();
   $('#myModal').modal('show');
});

要么

    $(document).on('load',function(){
        $('.modal').modal('show');
});

没有任何作品。

最后我会用类似

if(myVar == true)
     modal.show()
else
     modal.hide()

甚至有可能意识到这一点吗？ 任何帮助表示赞赏！

Answer 1

尝试这个 ！

的HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

和JavaScript

jQuery(document).ready(function(e) {
    jQuery('#myModal').modal();
});