Q:

Use html link to open javascript modal

I want to open a modal each time I click a HTML link.  In my navigation bar I have a link called "rules" where all the websites rules are written.  Everytime someone click the link I want it to open a javascript modal.  With low javascript knowledge I'm personally not able to create something as simple as that without problems. 
Heres the modal script and HTML:
<div class="modal-background">
<form action="/etc/set_cookie.php" method="post">
  <div id="modal">
    <div class="modalconent tabs">
        <fieldset>
        <span class="close">×</span>
          <h2 class="fs-title">Cookies</h2>
          <h3 class="fs-subtitle">We use cookies to improve your experience</h3>
             <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php" ></iframe><br />
           <input type="submit" name="cookie" value="Accept" id="button" class="btn fr" style="width:180px; padding:10px;" />
        </fieldset>
    </div>
  </div>
</form>
</div>

<script>
window.onload = function () {
    document.getElementById('button').onclick = function () {
        document.getElementById('modal').style.display = "none"
    };
};

$(".modal-background, .modal-close").on("click", function(){
  $(".modal-container, .modal-background").hide();
});

// Get the modal
var modal = document.getElementById('modal');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

What I want is have the link call open the script that are located in a different folder, each time its pressed.  All I've seen online is buttons with this function but since I'm not good with javascript I'm not able to rewrite it to work with my modal script. 

A:

For general Modal infotmation you get this from http://www.w3schools.com/howto/howto_css_modals.asp
// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

However if you are using Jquery (and from your code you are) then you have something easier to do:
Now what you can do is assign an ID to your link and do this:
 $("#YourIDHereLink").on("click", function ()
    {
        $("#Modal").css("display", "block");  
}

Where if you want to hide it replace block with "none"
Generally I recommend the 2nd approach

