Question

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

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

通过这些修改，它应该按照您希望的方式工作。我们所做的是让您添加到所有display: none;的{{1}}仅添加到.modal-content，因此它不会影响您正在创建的模式。

祝你好运

Bootstrap模态在触发后不会显示

1 个答案: