jquery - Hide first modal then show show second modal on click function -
i trying close first modal show modal form. have tried diffrent solution.it not close first modal show second modal behind first modal.
here code :
$('#weiter').click(function() { $('#mymodal5').data('modal', null); $('#mymodal55').modal('show'); });
i hope want achieve this.
try running code snippet full screen see working -
$(document).ready(function(){ $("#test1").click(function(){ $('.bs-example-modal-lg').modal('show'); $('.bs-example-modal-sm').modal('hide'); }); $("#test2").click(function(){ $('.bs-example-modal-lg').modal('hide'); $('.bs-example-modal-sm').modal('show'); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <hr/> <hr/> <!-- 1 modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">show modal1</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="examplemodallabel">modal 1</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">send message</button> <button type="button" class="btn btn-primary" id="test2">show second/ hide first</button> </div> </div> </div> </div> <!-- 2 modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">show modal2</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mysmallmodallabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="examplemodallabel">modal 2</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">send message</button> <button type="button" class="btn btn-primary" id="test1">show first/ hide second</button> </div> </div> </div> </div>
Comments
Post a Comment