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

Popular posts from this blog

javascript - jquery or ashx not working -

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

python 3.x - Mapping specific letters onto a list of words -