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

【问题标题】：button for 2nd modal won't open the modal第二个模态的按钮不会打开模态
【发布时间】：2017-03-06 10:18:06
【问题描述】：

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

这是引导程序 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>

【问题讨论】：

是的，这可能是一个错误（我认为 bootstrap 4 仍处于 alpha 阶段）。你能在这上面写一个codepen吗？
是的，谢谢@staypuftman：codepen.io/anon/pen/QKYXyb

标签： html bootstrap-modal bootstrap-4

【解决方案1】：

Bootstrap 中没有错误，只是 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>

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

【讨论】：