javascript - Bootstrap 模态在触发后不会显示

Question

在我将 display:none 包含在我的 css modal-content 下之前，它工作正常，但在我单击它之前，它在页面上显示了模态窗口。但是，当我将它添加到我的代码中时，当我单击 div 时，模态内容窗口不再显示。我知道这是因为它没有正确过渡，但无法弄清楚如何修复它。屏幕变暗，但窗口没有出现。我将为我正在处理的其中一个盒子提供代码，一旦我修复了它，我就可以修复其他 5 个。

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="services" class="padding">
  <div class="container">
    <div class="row">
      <div class="icon_wrap text-center clearfix">
        <div class="col-sm-4">
          <a class="modal-invoker" href="#">
            <div class="icon_box border_radius">
            <i class="fa fa-icon-truck"></i>
            <h4 class="text-capitalize">Local Moving</h4>
            </div>
            <h4 class="item-title wow fadeInDown"> Local Moving</h4>
          <div class="modal-content">
             <p class="lead"><img src="images/moving.jpg" width="500" height="313" alt="moving"></p>
          </div>
          </a>
        </div>

下面是我的另一部分html代码

 <div id="my-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Reservation</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a href="tel:2017452424" class="btn btn-primary">견적의뢰</a>
                </div>
            </div>
        </div>
  </div>

下面是css中的代码

.modal-content{
display:none;}
.modal-content img {
width: 100%;}
.item-title {
display:none;}

这是javascript

$(document).on("click", ".modal-invoker", function(e){
e.preventDefault();
var $container = $(this).parent();
$("#my-modal .modal-title").text($container.find(".item-title").text());
$("#my-modal .modal-body").html($container.find(".modal-content").html());
$("#my-modal").modal('show');
});

$(document).on("click", ".promotion-modal-invoker", function(e){
   e.preventDefault();
   $("#my-modal .modal-title").text($(this).data("title"));
   $("#my-modal .modal-body").html($($(this).data("content")).html());
   $("#my-modal").modal('show');
});

Answer 1

问题是您要向类 .modal-content 添加 css 属性 display: none;。这是您的模态无法正确显示的原因。因为您打开的模态还包含类 .modal-content。

要解决这个问题，只需将类 modal-reference 添加到

<div class="modal-content">
    <p class="lead"><img src="images/moving.jpg" width="500" height="313" alt="moving"></p>
</div>

看起来像:

<div class="modal-content modal-reference">
    <p class="lead"><img src="images/moving.jpg" width="500" height="313" alt="moving"></p>
</div>

将此类添加到您的 css(并从中删除 .modal-content):

.modal-reference { /* new class */
    display:none;
}
.modal-content img {
    width: 100%;
}
.item-title {
    display:none;
}

通过此修改，它应该可以按照您希望的方式工作。我们所做的是让你添加到所有 .modal-content 的 display: none; 只添加到 .modal-reference 上，所以它不会影响您正在创建的模态。

最好的问候