javascript - bootstrap modal call another modal within the same html -
i'm starting work bootstrap. grabbed sample code, seams not working. , have 3 questions.
a). call first modal ok. modal, cannot open second one.
b). still first modal, have button go contact div in html source, not working.
c). button js, calling function 'alert_hello' ok: displays alert, goes internal link #contact right after html page seems reload going top of page. why?
html code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/modal.js"></script> <a href="#contact" class="btn btn-primary">contact</a> <a href="#about" class="btn btn-primary">about</a> <!-- button trigger modal --> <button class="btn btn-success" data-toggle="modal" data-target="#mdlsignin">sign in</button> <a href="" class="btn btn-danger" onclick="alert_hello()">js</a> <!-- modal --> <div class="modal fade" id="mdlsignin" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4>sign in input</h4> </div> <div class="modal-body"> <form role="form" action='#' method="post"> <input type="text" class="form-control" placeholder="username"> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="signin">sign in</button> <button type="button" class="btn btn-primary" id="signin-cnt">contact</button> <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> </div> </div> </div> </div> <!-- modal --> <div class="modal fade" id="mdlsigninerr" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="mymodallabel">sign in error</h4> </div> <div class="modal-body"> <p>please review sign in input.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> </div> </div> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <div id="contact">contact us</div> <a href="#top" class="btn btn-primary">top</a> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <div id="about">about us</div> <a href="#top" class="btn btn-primary">top</a> </body> </html> javascript code called html:
//set button id on click hide first modal $("#signin").on( "click", function() { $('#mdlsignin').modal('hide'); $('#mdlsigninerr').modal('show'); }); $("#signin-cnt").on( "click", function() { $('#mdlsignin').modal('hide'); window.location="#contact"; }); function alert_hello() { alert('hello external javascript!'); window.location="#contact"; } i'm using bootstrap 3.3.7 both css , js , i'm using jquery 3.2.1.
thank in advance tips.
look this: multiple modals overlay
this may you need setup way allow modals stack, maybe case you.
edit:
also c), want go "contact"-div? may have close modals , use "scrollto" this:
$('html,body').animate({ scrolltop: $("#contact").offset().top}, 'slow'); });
maybe helps , wouldn't have use window.location; if want url #contact if want linkable use window.history.pushstate(a,b,c) like:
window.history.pushstate('contact', 'contact', '#contact'); this change title of page along adding "#contact" current page, scrollto wouldn't see "#contact".
Comments
Post a Comment