javascript - Bootstrap Modal switching -


i have 2 modals id1 , id2 , want open 1 of modal according state of paddle switch.when switch in 'off-state', modal id 'id1' needs opened , when switch in 'on-state', modal id 'id2' needs opened. on 'onchange' event, adding id of modal needs opened 'data-open' , 'aria-controls' attribute.

$('#button-id1').attr('data-open', 'id1'); $('#button-id1').attr('aria-controls', 'id2');   

but working first time, when closed opened modal, switching paddle shows opened modal. can give me idea going here?

try this

$('#id1').modal("hide"); 

it should in if statement when switch on-state selector id of modal should modal want hide or remove else off-state

if(switch_button == on_state){     $('#id1').modal("show");     $('#id2').modal("hide"); }else{     $('#id1').modal("hide");     $('#id2').modal("show"); } 

if confused condition have put. if switch button if there class open or whatsoever

if($('#switch_button').hasclass('open')){} 

if dont want open modal directly when switch changed can modify inside if statement

if(switch_button == on_state){     $('button1 of first modal').click(function(){         $('#id1').modal("show");         $('#id2').modal("hide");     }); }else{     $('button2 of second modal').click(function(){         $('#id1').modal("hide");         $('#id2').modal("show");     }); } 

and make sure modal has class of modal-lg large modal-md medium , modal-sm small see modal in different size.

<!-- large modal format -->         <div class="modal fade" id="large" tabindex="-1" role="dialog" aria-hidden="true">             <div class="modal-dialog modal-lg">                 <div class="modal-content">                     <!-- modal content here -->                 </div>             </div>         </div>          <!-- medium modal format -->          <div class="modal fade" id="medium" tabindex="-1" role="dialog" aria-hidden="true">             <div class="modal-dialog modal-md">                 <div class="modal-content">                     <!-- modal content here -->                 </div>             </div>         </div>          <!-- small modal format -->         <div class="modal fade" id="small" tabindex="-1" role="dialog" aria-hidden="true">             <div class="modal-dialog modal-sm">                 <div class="modal-content">                     <!-- modal content here -->                 </div>             </div>         </div>         <!-- end modal --> 

Comments

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -