第二个模态的按钮不会打开模态

Question

我有 2 个彼此相邻的按钮。第一个打开带有#myModal 数据目标的模态，第二个按钮使用#largeModalTwo 数据目标打开它。问题是，第一个工作正常，但点击第二个按钮只会使屏幕变暗，不会打开任何模式。

这是 bootstrap 4，这可能是它的错误吗？

               <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

Bootstrap 中没有错误，只是 HTML 中的一个超级小错误。 <table> 属性在 HTML 中不会自动关闭，正如您在第一个模态示例中所做的那样。我认为这是从 bootstrap 中丢弃模态 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>

修改后的代码笔： http://codepen.io/staypuftman/pen/wzNVxP

第二个模态的按钮不会打开模态

button for 2nd modal won't open the modal

html

bootstrap-modal

bootstrap-4