Unable to get leanModal to work

Question

I am trying to understand how leanModal works, but I cannot figure it out. I followed the setup from my site here: http://leanmodal.finelysliced.com.au/?# . However, I do not understand what to do for step 3.

I installed 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 identifier of your target element."

I assume that a modal trigger is a button that I want to click to open a window. I'm not sure what the second sentence means. Thanks for the help!

Answer 1

This is a sample demo for you. Your html should look 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 look like this: I assume that you referenced the script artistically in your document in your head and you are not getting any errors in the browser console.

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

Answer 2

Try using $ (document) .ready () as:

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

Answer 3

You can include jquery.leanModal.d.ts in your project from a specifically typed library https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery.leanModal

Your Typescript compiler will have a link to something.

In the CMD line, enter "typings install jquery.leanmodal --ambient" to install.