CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4
Harsha Limaye
Harsha Limaye

Reputation: 1133

How do I trigger a Modal with JavaScript?

I want to show a modal in my document when I click on an element. I am able to make it work with default bootstrap 'data-toggle' and 'data-target' attributes. But when I try to achieve the same effect with JavaScript, the modal is not showing up. Here is the relevant code:

<span class="navbar-text">
    <a href="" id="login">
        <span class="fa fa-sign-in fa-lg"></span>
        Login
    </a>
</span>

<script>
    $(document).ready(function () {
        $("#login").click(function () {
            $("#loginModal").modal('show');
        });
    });
</script>

It just appears to fade in the modal for a split second but it does not show up.

Below is the modal div which I am trying to show:

<div id="loginModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="content">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login</h4>
                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-row">
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputEmail3">Email address</label>
                            <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
                                placeholder="Enter email">
                        </div>
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputPassword3">Password</label>
                            <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
                                placeholder="Password">
                        </div>
                        <div class="col-sm-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox">
                                <label class="form-check-label"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <button type="button" class="btn btn-secondary btn-sm ml-auto"
                            data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1074

Answers (1)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48683

Your code is correct, but you have not provided any HTML. I can only assume you followed the guides below to set up your site.

Edit: Since you provided your HTML, your problem is your href is empty, so it is going to an empty page. Change the anchor href to # or make it a button like in my full example below.

<a href="#" id="login">

Here is a perfect explanation: href must not reload. You can even throw in an onClick event for good measure.

Your fixed code

$(function() {
  $("#login").click(function() {
    $("#loginModal").modal('show');
  });
});
.navbar-text {
  display: block;
  border: thin solid #007bff;
  margin: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<span class="navbar-text">
  <a href="#" id="login">
    <span class="fa fa-sign-in fa-lg"></span> Login
  </a>
</span>

<div id="loginModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" role="content">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Login</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-row">
            <div class="form-group col-sm-4">
              <label class="sr-only" for="exampleInputEmail3">Email address</label>
              <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
            </div>
            <div class="form-group col-sm-4">
              <label class="sr-only" for="exampleInputPassword3">Password</label>
              <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
            </div>
            <div class="col-sm-auto">
              <div class="form-check">
                <input class="form-check-input" type="checkbox">
                <label class="form-check-label"> Remember me</label>
              </div>
            </div>
          </div>
          <div class="form-row">
            <button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Full button example

The Modal documentation has multiple examples of windows. I combined four documentation examples below to create a usable "Log In" function for a Bootstrap site.

Important steps

  1. Ensure your button id is "login"
  2. Ensure your modal window id is "loginModal"
  3. Ensure your modal window is laid-out correctly
  4. Ensure your modal window has the correct fade class

Resources

$(function() {
  $("#login").click(function() {
    $("#loginModal").modal('show');
  });
});
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="#">Features</a>
    <a class="p-2 text-dark" href="#">Enterprise</a>
    <a class="p-2 text-dark" href="#">Support</a>
    <a class="p-2 text-dark" href="#">Pricing</a>
  </nav>
  <a class="btn btn-outline-primary" id="login" href="#">
    <span class="fa fa-sign-in fa-lg"></span> Log In
  </a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h1 class="display-4">Pricing</h1>
  <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>

<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Log In</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group row">
            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail" value="[email protected]">
            </div>
          </div>
          <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Log In</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions