Can't get leanModal to work

Question

I am trying to understand how leanModal works but I can't seem to figure it out. I followed the setup from their site here:http://leanmodal.finelysliced.com.au/?#. However, I don't understand what to do for step 3.

I have set up this function in my html file:

<script type="text/javascript">
     $('#btnToCreate-Join').click(function() {
          $("#trigger_id").leanModal();
     });
</script>

Step 3 says "call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element."

I am assuming that the modal trigger is the button I want to click to bring up the window. I am not sure what the second sentence means. Thanks for the help!

Answer 1

This is a sample pen demo for you. Your html should be like this:

<a id="go" name="test" href="#test">Basic</a>

<div id="test">
     bla bla bla
</div>

You css should be like this:

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#test {
width: 600px;
padding: 30px;
display: none;
background: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}

Your javascript should be like this: I assume you have referenced the leanmodal script in your document in head and you are not getting any errors in the browser's console.

<script type="text/javascript">
  $("#go").leanModal();
</script>

Answer 2

Try with $(document).ready() like:

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnToCreate-Join').click(function() {
            $("#trigger_id").leanModal();
        });
    });
</script>