CODEWITHSUNDEEP
htmlbootstrap-modalbootstrap-4
Alex Cushing
Alex Cushing

Reputation: 286

button for 2nd modal won't open the modal

I have 2 buttons next to each other. The first opens a modal with the data-target of #myModal and the second button opens it with the data-taget of #largeModalTwo. The problem is, the first works fine but clicking the 2nd button only dims the screen, it doesn't open any modal.

this is bootstrap 4, could this be a bug with it?

here is the 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>

Upvotes: 0

Views: 1967

Answers (1)

serraosays
serraosays

Reputation: 7899

No bug in Bootstrap just a super minor error in your HTML. <table> properties are not self-closing in HTML, as you have in your first modal example. I think this was throwing off the modal JS from bootstrap because the element wasn't ever closed.

A minor code change in the modal body and you are good to go:

  <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>

Revised codepen: http://codepen.io/staypuftman/pen/wzNVxP

Upvotes: 2

Related Questions