Question

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

我想让用户点击x按钮退出模态，以便访问地图。我不知道如何让它关闭。以下是我的代码片段：

/* 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">✕</a>。

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

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

Answer 2

我们假设您需要将关闭模态函数绑定到ID为 close_my_modal 的按钮，并且模态的ID为 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.

});

此外，还可以使用属性数据消除。

如果在关闭模式之前没有任何代码要执行，建议使用data-dismiss属性，因为它的工作由bootstrap控制。但是，如果需要在关闭模态之前执行任何操作，则必须将单击功能绑定到按钮，然后手动切换模态。

Answer 3

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

或通过jQuery

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

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

3 个答案: