javascript - 如何创建一个关闭引导模式的函数？

Question

如何创建一个关闭引导模式的函数？我已经为我的 Google Maps API 创建了一个引导模式，可以通过以下链接查看:http://userpages.flemingc.on.ca/~eluli/modal.html

我想让用户可以单击 x 按钮退出模式，以便访问 map 。我不知道如何让它关闭。下面是我的代码片段:

/* 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

您可以将属性添加到 <a class="close-reveal-modal">&#10005;</a> .

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

此外，close-reveal-modal是 Foundation 而不是 Bootstrap。