以编程方式显示Bootstrap模态窗口

Question

我正在使用JavaScript。我不知道如何打开Bootstrap模态框。 当我点击下面的按钮时，它可以正常工作：

 <button type="button" class="btn btn-primary" data-toggle="modal" id="btnOpenPopup" data-target="#myModal">
     Open modal
 </button>

但我希望在没有用户事件的情况下打开它，应该通过编程方式打开。

我尝试使用 $("#btnOpenPopup").click(); 和 (document.getElementById('btnOpenPopup')).click(); 但它们都不起作用。

下面是我的模态框。

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
          Modal body..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

- Pranita Chavan

---

你的 Bootstrap 版本是什么？ - Nek

4.1.0 是我的 Bootstrap 版本。 - Pranita Chavan

你如何以及何时使用这个函数？页面是否已经加载？ - NayoR

没有，我有一个登录按钮。如果登录信息正确，我想显示这个弹出窗口。 - Pranita Chavan

有控制台错误吗？ - Vivekraj K R

如果可能的话，请发布您的代码。 - Aniket kale

Answer 1

试试这个。它对我有效。

如果您有一个登录按钮，如果登录详细信息正确，则希望显示此弹出窗口。那么可以像这样做。

<button type="button" class="btn btn-primary" onclick="checkUserDetails()"> Login</button>

然后，在您的脚本标签或js文件中：

function checkUserDetails() {
  // Check user details here 
  if (loginDetail) {  
    $("#YourModelName").show();   // show modal/popup
  } else {
    // do somethimg if logindetails is not valid
  }
}

希望这对你有帮助。

- Aniket kale

Answer 2

尝试将modal()函数放在document.ready内部

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

这里是可用的Fiddle链接。

- Vivekraj K R

Answer 3

对于Bootstrap 4.x，看起来好的方式是：

$('#myModal').modal('show')

来源：http://getbootstrap.com/docs/4.1/getting-started/javascript/

- Nek

Answer 4

你可以通过使用 .hide() 和 .show() 方法手动完成它。

$(function(){
   $("#myModal").hide();
   $("#btnOpenPopup").click(function(){
         $("#myModal").show();
    });
 });

- mooga

Answer 5

你可以使用 modal() 函数来切换一个模态框。

$("#myModal").modal(show | hide)

这对于 Bootstrap 3 和 4 都是相同的。

查看源代码在此处。

- Strikegently

---

@PranitaChavan 发布你尝试时使用的代码。 - Strikegently