Question

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

这是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中不会自动关闭，就像在第一个模态示例中一样。我认为这是从引导程序中抛弃模态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

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

1 个答案: