javascript - I have two bootstrap modals on an html page,only the first modal opens -
i have 2 boostrap modals on html page,only first modal opens first dialog opens while second not.
sample code: http://www.bootply.com/130370#
html:
<button class="btn btn-primary" id="report" alt="report">report query parameters</button> <button class="btn btn-primary" id="reportdata" alt="report">report</button> <div class="modal fade" id="modal-reportdata" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content report-modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modal-title-report">generated report </h4> </div> <div class="modal-body "> <div class="modal-footer"> </div></div></div></div> <div class="modal fade" id="modal-reportparameters" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content report-modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modal-title-report">report query parameters</h4> </div> <div class="modal-body node-inventory-modal-body"> <div class="row margin-bottom"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="colname" class="col-md-2 control-label"></label> <div class="col-md-10"> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-primary" id="queryparameters">ok</button> <button class="btn btn-default" data-dismiss="modal" id="cancel">cancel</button> </div></div></div></div> js
$('#report').click(function() { $("#modal-reportparameters").modal('show'); }); $('#reportdata').click(function() { $("#modal-reportdata").modal('show');
in html snippet, looks you're missing closing div tag each modal - http://jsfiddle.net/5wvn7/
<button class="btn btn-primary" id="report" alt="report">report query parameters</button> <button class="btn btn-primary" id="reportdata" alt="report">report</button> <div class="modal fade" id="modal-reportdata" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content report-modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modal-title-report">generated report </h4> </div> <div class="modal-body "> <div class="modal-footer"> </div> </div> </div> </div> </div> <div class="modal fade" id="modal-reportparameters" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content report-modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modal-title-report">report query parameters</h4> </div> <div class="modal-body node-inventory-modal-body"> <div class="row margin-bottom"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="colname" class="col-md-2 control-label"></label> <div class="col-md-10"> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-primary" id="queryparameters">ok</button> <button class="btn btn-default" data-dismiss="modal" id="cancel">cancel</button> </div> </div> </div> </div> </div>
Comments
Post a Comment