2番目のモーダルのボタンでモーダルが開かない

Question

2つのボタンが隣にあります。最初は#myModalのデータターゲットでモーダルを開き、2番目のボタンは#largeModalTwoのデータタグセットでそれを開きます。問題は、最初の作品は正常ですが、2番目のボタンをクリックすると画面が暗くなりますが、それはどのモーダルも開きません。

これはブートストラップ4です。これはバグかもしれませんか？ここ

はちょうどブートストラップでcodepen

   <div id="fullWidthContButtons"> 
       <div class="container-fluid centerthisouter" style="margin-top: 25px;"> 
        <div class="page-header centerthisinner centerthisouter"> 
         <button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#myModal"> 
          <h3 class="title">test data</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button> 
        </div> 
       </div> 
       <div class="container-fluid centerthisouter" style="margin-top: 25px;"> 
        <div class="page-header centerthisinner centerthisouter"> 
         <button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#largeModalTwo"> 
          <h3 class="title">test data 2</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button> 
        </div> 
       </div> 
      </div> 




      <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
       <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title" id="myModalLabel">Load JSON</h4> </div> 
         <div class="modal-body centerthisouter"> 
          <button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">Load JSON file to create table</button> 
          <table class="table table-striped" id="data_table" /> </div> 
        </div> 
       </div> 
      </div> 
      <div id="largeModalTwo" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
       <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-content"> ... </div> 
       </div> 
      </div> 

Answer 1

ませバグあなたのHTML内の超マイナーなエラーではありません。 <table>プロパティは、最初のモーダルの例のようにHTMLでは自己終了しません。要素が閉じられなかったので、これはブートストラップからモーダルJSを投げ捨てていたと思います。

modal bodyでマイナーコードの変更、あなたが行ってもいいです：

<div class="modal-body centerthisouter"> 
    <button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson"> 
     Load JSON file to create table 
    </button> 
    <table class="table table-striped" id="data_table"></table> 
    </div> 

改訂codepen： http://codepen.io/staypuftman/pen/wzNVxP