Streaming live at 10am (PST)

Modal Form Not Appearing


#1

Hey Guys,

I'm having an issue with my modal form not appearing, it just isn't appearing!
I've followed sergies tutorial properly but it just isn't working!
Could you guys or, @thesergie help out please?

Check it out at: http://informationpack.net/test/index.html

Here is the important code:

At the bottom of my index.html:

    <div class="modal-background">
<div class="w-clearfix modal-window"><a class="close-modal" href="#">Close</a>
  <h3>Let's get in touch.</h3>
  <div class="w-row">
    <div class="w-col w-col-6">
      <h4>This is some text</h4>
    </div>
    <div class="w-col w-col-6">
      <div class="w-form">
        <form name="email-form" data-name="Email Form">
          <label for="name">Name:</label>
          <input class="w-input" type="text" placeholder="Enter your name" name="name" data-name="Name"></input>
          <label for="email">Email Address:</label>
          <input class="w-input" type="text" placeholder="Enter your email address" name="email" data-name="Email" required="required"></input>
          <label for="email">Favorite Pet:</label>
          <input class="w-input" type="text" placeholder="My dog Jumpy" name="pet" data-name="Pet" required="required"></input>
          <input class="w-button form-button" type="submit" value="Submit Information" data-wait="Please wait..."></input>
        </form>
        <div class="w-form-done">
          <p>Thank you! Your submission has been received!</p>
        </div>
        <div class="w-form-fail">
          <p>Oops! Something went wrong while submitting the form :(</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-background').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-background').fadeOut();
  });
});

</script>

My button:

<div class="buttons"><a class="modal-link button informationpack" href="#" >information pack</a>
</div>

The CSS:

    .modal-background {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3;
  display: none;
  height: 100%;
  padding-top: 150px;
  padding-bottom: 81px;
  background-color: rgba(0, 0, 0, 0.49);
}
.modal-window {
  display: block;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
  border-radius: 4px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 0px 1px, rgba(0, 0, 0, 0.41) 0px 0px 17px 0px;
}
.close-modal {
  float: right;
  color: rgba(0, 0, 0, 0.49);
  text-decoration: none;
  text-transform: uppercase;
}

Please advise!
Many Thanks to those who help!


#2

Hi @sparkzweb, it looks like you're adding your $(document).ready(...) call in an Embed element. You should actually do it in the "Custom Code" (before tag) section on the dashboard. What's happening now is that your script (which relies on the $ jQuery variable) is running before jQuery has a chance to load:

By putting that code at the end of the <body> tag, you can make sure that it only runs once jQuery is loaded by the browser. Does that make sense?


#3

Try this:

@sparkzweb
Put this as your script:

<script type="text/javascript">

$(document).ready(function() {
  $('.modal-link').click(function(e) {
    e.preventDefault();
    $('.modal-background').fadeIn();
  });
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('.modal-background').fadeOut();
  });
});

</script>

You have forgotten to use e.preventDefault(); and add e to function(). If you copy your code it should work as a charm smile Good luck!


#4

Thanks guys.
That fixed it smile


#5