Question

我正在尝试在不使用任何按钮或jquery的情况下启动Bootstrap模式。我只想在页面加载时显示引导模式作为信息，用户应该能够使用关闭按钮关闭它，或者在页面上的任何位置单击它时应该关闭它。我试图使用这个SO问题的解决方案 load-without-firing-button-or-using-jquery

但是，使用建议的解决方案可以防止使用数据关闭关闭模态。

.modal {
  display:block;
}

在这种情况下，模态没有关闭的原因是什么？我已经尝试应用单独的CSS类，但它没有什么区别。

.mymodal {
      display:block;
    }

HTML

 <div id="registrationModal" class="modal fade in mymodal">
   <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title">Title</h4>
           </div>
          <div class="modal-body">
                Text
          </div>
    </div>
  </div>

是否可以在不使用jquery的情况下实现这一目标？或有效的解释为什么这样的事情不可能？

Answer 1

模态不会关闭，因为当您打开和关闭模态时，有多个函数可以执行不同的操作。因此，当您打开模态时，将添加类.in，显示块，并从该元素中删除area-hidden =“true”。所以当你点击关闭时有反向功能。在你的情况下，只是添加显示块将无法工作，因为你需要删除类.in并删除整个area-hidden =“true”属性。

以下是工作代码：

<style>
.modal{display:block;}
</style>

<script>
$(function() {
    $(".modal").addClass("in");
    $(".close").click(function(){
        $(".modal").removeClass("in").css("display","none").attr("aria-hidden","true"); 
    });
});
</script> 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal">
  Launch demo modal
</button>

<div id="my-modal" class="modal fade in">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                Hello World!
            </div>
        </div>
    </div> 
</div>

<div class="modal-backdrop fade"></div>

Answer 2

很抱歉，我知道你没有提到jQuery，但是我没有意识到的CSS修复，而且所需的jQuery很少。

我建议像这样显示它，也许如果没有更好的答案，你可以考虑一下：

＆＃13;

$('.modal').modal('show');

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="registrationModal" class="modal fade in mymodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        Text
      </div>
    </div>
  </div>

＆＃13;

直接应用display：block类时，Bootstrap模态不会关闭

2 个答案: