直到我检查浏览器，我的模态内容才会显示

Question

Modal without inspecting

Modal After inspect the browser window

Answer 1

它在codepen链接中运行良好：https://codepen.io/kalaiselvan/pen/POKyKw

＆＃13;

＆＃13;

 $('#exampleModal').on('show.bs.modal', function(e) {
      $(window).resize();
      $(window).resize();
    });
    $('#lightSlider').lightSlider({
      gallery: true,
      item: 1,
      loop: true,
      slideMargin: 0,
      thumbItem: 9
    });

＆＃13;

 .demo {
      width: 450px;
    }

    ul {
      list-style: none outside none;
      padding-left: 0;
      margin-bottom: 0;
    }

    li {
      display: block;
      float: left;
      margin-right: 6px;
      cursor: pointer;
    }

    img {
      display: block;
      height: auto;
      max-width: 100%;
    }

＆＃13;

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>
	
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="col-md-12">
              <div class="demo">
                <ul id="lightSlider">
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
                  </li>
                  <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
                    <img src="https://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;