Bootstrap Modal Not Opening (trigger) On Click

I have some issues with a modal that i have. I searched a lot, i found some similar issues with data-target='#panel-modal2' where there was no #, but mine seems O.K. Any help? Th

Solution 1:

Try adding bootstrap.js in your script tag. Also add jquery.js before the bootstrap.js

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="btn-group"><aclass="btn btn-red btn-ripple"data-toggle="modal"data-target="#panel-modal2">Transfer</a></div><!--.btn-group--><divclass="modal modal-nutrition fade full-height from-right"id="panel-modal2"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><divclass="row"><divclass="col-md-12"><h4class="modal-title">Transfer</h4></div></div></div><divclass="modal-body"><divclass="form-group"><divclass="row"><divclass="col-md-3">From:</div><divclass="col-md-9">Nursery</div></div><divclass="row margin-top-30"><divclass="col-md-3">To:</div><divclass="col-md-9"><selectclass="selectpicker"data-width="100%"><option>- Select -</option><option>Nursery</option><option>Toddlers</option><option>Other kindergarten</option></select></div></div><divclass="row margin-top-30"><divclass="col-md-3">Date:</div><divclass="col-md-9"><divclass="control-group"><divclass="controls"><divclass="input-group"><spanclass="input-group-addon"><iclass="ion-android-calendar"></i></span><divclass="inputer"><divclass="input-wrapper"><inputtype="text"style="width: 200px"name="transferDate"class="form-control bootstrap-daterangepicker-basic"value="03/18/2013" /></div></div></div></div></div></div></div></div><divclass="row"><divclass="col-md-12"><divclass="note note-info note-left-striped"><h4>Active Transfer</h4><p>This person will transfer to Nursery on 14.05.2016</p><p>If you submit a new transfer the active one will be overwrited.</p></div><!--.note--></div><!--.col-md-12--></div><!--.row--></div><divclass="modal-footer"><buttontype="button"class="btn btn-flat-secondary"data-dismiss="modal">Cancel</button><buttontype="button"class="btn btn-flat-primary"data-dismiss="modal">Submit</button></div></div></div>

Solution 2:

Please add default jquery and boostrap js your modal popup will work fine. Please check below snippet for more understanding.

<linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="btn-group"><aclass="btn btn-red btn-ripple"data-toggle="modal"data-target="#panel-modal2">Transfer</a></div><!--.btn-group--><divclass="modal modal-nutrition fade full-height from-right"id="panel-modal2"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><divclass="row"><divclass="col-md-12"><h4class="modal-title">Transfer</h4></div></div></div><divclass="modal-body"><divclass="form-group"><divclass="row"><divclass="col-md-3">From:</div><divclass="col-md-9">Nursery</div></div><divclass="row margin-top-30"><divclass="col-md-3">To:</div><divclass="col-md-9"><selectclass="selectpicker"data-width="100%"><option>- Select -</option><option>Nursery</option><option>Toddlers</option><option>Other kindergarten</option></select></div></div><divclass="row margin-top-30"><divclass="col-md-3">Date:</div><divclass="col-md-9"><divclass="control-group"><divclass="controls"><divclass="input-group"><spanclass="input-group-addon"><iclass="ion-android-calendar"></i></span><divclass="inputer"><divclass="input-wrapper"><inputtype="text"style="width: 200px"name="transferDate"class="form-control bootstrap-daterangepicker-basic"value="03/18/2013" /></div></div></div></div></div></div></div></div><divclass="row"><divclass="col-md-12"><divclass="note note-info note-left-striped"><h4>Active Transfer</h4><p>This person will transfer to Nursery on 14.05.2016</p><p>If you submit a new transfer the active one will be overwrited.</p></div><!--.note--></div><!--.col-md-12--></div><!--.row--></div><divclass="modal-footer"><buttontype="button"class="btn btn-flat-secondary"data-dismiss="modal">Cancel</button><buttontype="button"class="btn btn-flat-primary"data-dismiss="modal">Submit</button></div></div></div>

Solution 3:

It's probably because you're using a too old or too new version of jquery for bootstrap v3.x.x requirements. Check that your jquery version (max) is 2.2.4, because your code is fine, there's nothing wrong with it.

Solution 4:

Try this

<linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="btn-group"><aclass="btn btn-red btn-ripple"data-toggle="modal"data-target="#panel-modal2">Transfer</a></div><!--.btn-group--><divclass="modal modal-nutrition fade full-height from-right"id="panel-modal2"tabindex="-1"role="dialog"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><divclass="row"><divclass="col-md-12"><h4class="modal-title">Transfer</h4></div></div></div><divclass="modal-body"><divclass="form-group"><divclass="row"><divclass="col-md-3">From:</div><divclass="col-md-9">Nursery</div></div><divclass="row margin-top-30"><divclass="col-md-3">To:</div><divclass="col-md-9"><selectclass="selectpicker"data-width="100%"><option>- Select -</option><option>Nursery</option><option>Toddlers</option><option>Other kindergarten</option></select></div></div><divclass="row margin-top-30"><divclass="col-md-3">Date:</div><divclass="col-md-9"><divclass="control-group"><divclass="controls"><divclass="input-group"><spanclass="input-group-addon"><iclass="ion-android-calendar"></i></span><divclass="inputer"><divclass="input-wrapper"><inputtype="text"style="width: 200px"name="transferDate"class="form-control bootstrap-daterangepicker-basic"value="03/18/2013" /></div></div></div></div></div></div></div></div><divclass="row"><divclass="col-md-12"><divclass="note note-info note-left-striped"><h4>Active Transfer</h4><p>This person will transfer to Nursery on 14.05.2016</p><p>If you submit a new transfer the active one will be overwrited.</p></div><!--.note--></div><!--.col-md-12--></div><!--.row--></div><divclass="modal-footer"><buttontype="button"class="btn btn-flat-secondary"data-dismiss="modal">Cancel</button><buttontype="button"class="btn btn-flat-primary"data-dismiss="modal">Submit</button></div></div></div>

Solution 5:

For elements, omit data-target, and use href="#modalID" instead;