CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-modal
bsky
bsky

Reputation: 20222

display modal nested within panel

I am using Bootstrap and react to show a panel component, which has inside it a modal:

<div className="panel panel-default" id="content">
   <div className='panel-heading text-center' id='tableButtons'>
      <h2 className="panel-title central-headingText">Assignments </h2>
   </div>
   <Table/>
</div>

Where <Table/> is:

        <div>
            <div id='tableContainer'>
                <table className="table table-condensed"></table>
            </div>

            {this.state.displayDeleteModal
                ?
                <div id="myModal" className="modal fade" role="dialog">
                    <div className="modal-dialog">

                    <div className="modal-content">
                      <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div className="modal-body">
                        <p>Are you sure you want to make the deletion?</p>
                      </div>
                    </div>

                  </div>
                </div>
                :
                null
            }

        </div>

However, when the variable this.state.displayDeleteModal becomes true, the modal is not displayed. I believe this is because the modal is nested within a Bootstrap panel.

How can I make the modal appear?

Upvotes: 1

Views: 195

Answers (1)

Scarecrow
Scarecrow

Reputation: 4137

You need to manually opens a modal on your condition.

To show modal using JavaScript use 

$('#myModal').modal('show')

http://getbootstrap.com/javascript/#modals-options

Try this code: 

    <div>
        <div id='tableContainer'>
            <table className="table table-condensed"></table>
        </div>

        {this.state.displayDeleteModal
            ?
            <div id="myModal" className="modal fade" role="dialog">
                <div className="modal-dialog">

                <div className="modal-content">
                  <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div className="modal-body">
                    <p>Are you sure you want to make the deletion?</p>
                  </div>
                </div>

              </div>
            </div>
            <script>
                $(function(){
                   $('#myModal').modal('show');
                });
            </script>  
            :
            null
        }

    </div>

Upvotes: 1

Related Questions