Open modal on click event using Javascript

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>

add class "modal fade" in #Registration div

Tamil Selvan C
– Tamil Selvan C

2017-12-21 13:04:32 +00:00
Commented Dec 21, 2017 at 13:04 — Tamil Selvan C
– Tamil Selvan C, Commented Dec 21, 2017 at 13:04

user8893882 · Accepted Answer · 2017-12-21 13:07:05Z

<!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>

Tamil Selvan C · Accepted Answer · 2017-12-21 13:06:03Z

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>

Ankur Dubey · Accepted Answer · 2017-12-21 13:08:15Z

0

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

answered Dec 21, 2017 at 13:08

Ankur Dubey

296 bronze badges

Collectives™ on Stack Overflow

Open modal on click event using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related