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
Post a Comment