私のモーダルコンテンツdoes'tショー私はブラウザ

Question

Modal without inspecting

Modal After inspect the browser window

codepenリンクに細かい作業

Answer 1

その検査まで：https://codepen.io/kalaiselvan/pen/POKyKw

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

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

<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" /> 
 
\t 
 
    <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> 
 
\t 
 
    <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>

を