stackoom
  简体   繁体   中英

Open modal on click event using Javascript

 原文  2017-12-21 12:57:03  1   3    javascript/ bootstrap-modal

Question

I create a model form using ct-js-productForm library but now i want to open that model using on click event. Right now when i refresh the page bydefault the model is open.I want to open that model using on click event. 

 <a href="#" id="register"><i class="fa fa-plus-square"></i> Register</a>
    <div class="ct-popupForm ct-js-productForm" id ="Registration">
        <div class="container">
          <form role="form" class="center-block" method="POST">
                <div class="form-group">
                    <div class="ct-form-content">
                        <div class="row">
                            <div class="col-md-6">
                                <label>First Name</label>
                                <input type="text" required class="form-control input-lg" value="Kristine" placeholder="">
                                <label>Last Name</label>
                                <input type="text" required class="form-control input-lg" value="Black" placeholder="">
                                <label>Number of Properties</label>
                                <input type="text" required class="form-control input-lg" value="15" placeholder="">
                                <label>Include contact form?</label>
                            </div>
                         </div>
                        <button type="submit" class="btn btn-success center-block">Save changes</button>
                    </div>
                    <div class="ct-form-close"><i class="fa fa-times"></i></div>
                </div>
            </form>
        </div>
    </div>
    <script>
    $(function(){
    var options = {
            "backdrop" : "static",
            "show":true
        }
    $("#register").on("click", function(){
        console.log('hi');

       $('#Registration').modal(options);
    });
});
</script>

3 answers

solution1
 0  2017-12-21 13:06:03

Add modal class to the #Registration div 

 $(function() { var options = { "backdrop" : "static", "show": true } $("#register").on("click", function() { console.log('hi'); $('#Registration').modal(options); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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" /> <a href="#" id="register"><i class="fa fa-plus-square"></i> Register</a> <div class="ct-popupForm ct-js-productForm modal fade" id="Registration"> <div class="container"> <form role="form" class="center-block" method="POST"> <div class="form-group"> <div class="ct-form-content"> <div class="row"> <div class="col-md-6"> <label>First Name</label> <input type="text" required class="form-control input-lg" value="Kristine" placeholder=""> <label>Last Name</label> <input type="text" required class="form-control input-lg" value="Black" placeholder=""> <label>Number of Properties</label> <input type="text" required class="form-control input-lg" value="15" placeholder=""> <label>Include contact form?</label> </div> </div> <button type="submit" class="btn btn-success center-block">Save changes</button> </div> <div class="ct-form-close"><i class="fa fa-times"></i></div> </div> </form> </div> </div>

solution2
 0  2017-12-21 13:07:05

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <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> </head> <body> <a href="#" id="register"><i class="fa fa-plus-square"></i> Register</a> <div class="modal fade" id ="Registration"> <div class="container"> <form role="form" class="center-block" method="POST"> <div class="form-group"> <div class="ct-form-content"> <div class="row"> <div class="col-md-6"> <label>First Name</label> <input type="text" required class="form-control input-lg" value="Kristine" placeholder=""> <label>Last Name</label> <input type="text" required class="form-control input-lg" value="Black" placeholder=""> <label>Number of Properties</label> <input type="text" required class="form-control input-lg" value="15" placeholder=""> <label>Include contact form?</label> </div> </div> <button type="submit" class="btn btn-success center-block">Save changes</button> </div> <div class="ct-form-close"><i class="fa fa-times"></i></div> </div> </form> </div> </div> <script> $('document').ready(function() { var options = { "backdrop" : "static", "show":true } $("#register").on("click", function(){ $('#Registration').modal(options); }); }); </script> </body> </html>

solution3
 0  2017-12-21 13:08:15

You forgot to put ; at the end of this. 

var options = {
            "backdrop" : "static",
            "show":true
        };

second add class "modal fade" in #Registration div block or set display:none to your #Registration div

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question open window on click of button as modal dialog using javascript Vue fullcalendar, open . modal on event click On click of event open a modal with specific items Bootstrap modal dialog button click event triggering on modal open Javascript DOM click() does not work to open modal Open modal using JavaScript (not jQuery) How to Open a Modal Using Javascript How to open bootstrap modal using a button click fullcalendar open event using Bootstrap Modal Getting on click event using boostrap modal
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM