How do I create a function that will close the bootstrap modal?

Question

How do I create a function that will close the bootstrap modal? I’ve created a bootstrap modal for my Google Maps API, which can be seen with this link: http://userpages.flemingc.on.ca/~eluli/modal.html

I want to make it possible for users to click on the x button to exit the modal, in order to access the map. I am not sure how to get it to close. Below is a snippet of my code:

/* The boostrap modal*/
.reveal-modal{
left: 50%;
margin-left: -300px;
width: 520px;
background: #eee;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
top: 100px; o
pacity: 1; 
visibility: visible;
}


/* The close button */
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}




/*HTML of bootstrap modal*/
<div id="map" class="reveal-modal" style="top: 100px; opacity: 1; visibility: visible;">

/* close button*/
<a class="close-reveal-modal">&#10005;</a> 

<h1>Ontario Water Company and Electoral District Map</h1>
<p>This map provides information on stakeholders, companies and schools that affiliate with WaterTAP.</p>
<p>Note: the map information might have discrepancies since the boundaries of some electoral districts change when provincial elections occur. </p> </div>

<div class="reveal-modal-bg" style="display: block; cursor: pointer;"></div>

Answer 1

You can add an attribute to <a class="close-reveal-modal">&#10005;</a>.

<a class="close-reveal-modal" data-dismiss="modal">&#10005;</a> 

Also, close-reveal-modal is Foundation and not Bootstrap.

Answer 2

Let us say you need to bind the close modal function to a button with id close_my_modal and the id of modal is my_modal

jQuery("close_my_modal").click(function(){
    // Do your stuff here
    jQuery('#my_modal').modal("toggle");
    jQuery(".modal-backdrop").remove(); // Though this should have been controlled by bootstrap, but it did not, hence, have to do it our code.

});

Also, there is an attribute data-dismiss that can be used as well.

In case you do not have any code to execute before closing the modal, it is recommended to use data-dismiss attribute as it's working is then controlled by bootstrap. However, if you need to perform any operations, prior to close of modal, you have to bind the click function to a button and then manually toggle the modal.

Answer 3

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>

or by jQuery

$(function(){
    $('.close-reveal-modal').click(function(){
      $('#map').modal('hide');
    });
});