如何关闭 twitter 引导模式（初始启动后）
Posted
技术标签:
【中文标题】如何关闭 twitter 引导模式（初始启动后）【英文标题】：How to get twitter bootstrap modal to close (after initial launch) 【发布时间】：2012-05-16 17:57:35 【问题描述】：我是个菜鸟，所以我想我正在使用 twitter 引导模式来监督一些事情（可能很明显）。我想要做的是让一个模式只在移动设备上启动。这适用于在模态 div 上添加类 .visible-phone 。到目前为止，一切都很好。但是我希望它能够工作，这意味着您可以使用 X 按钮将其关闭。而且我无法让按钮工作。
<div class="modal visible-phone" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
在 html 的底部，我放了 jquery.js（第一个）和 bootstrap.modal.js 和 bootstrap.transition.js。实际上所有的引导 js 模块（不要错过包含）。 我对js没有经验..
如果我提出了一个非常愚蠢的问题，请原谅我。我在日志中找不到这种特定情况的答案。
【问题讨论】：
【参考方案1】：$('#myModal').modal('hide') 应该这样做
【讨论】：
是的，这行得通。但我没有使用 'data-dismiss="modal"' 的相同动画？ 好吧，我错了。实际上我不记得我当时遇到的问题，我现在使用它并且它工作得很好。泰！ 在这里了解更多.. ***.com/questions/10944302/… 这很奇怪，$('#myModal').modal('show') 对我有用，但 hide 不行。
@LittleBigBot 尝试改用$('#myModal').modal('toggle');【参考方案2】：
我在关闭引导模式对话框时遇到问题，如果它是通过以下方式打开的：
$('#myModal').modal('show');
我通过以下链接打开对话框解决了这个问题：
<a href="#myModal" data-toggle="modal">Open my dialog</a>
不要忘记初始化：
$('#myModal').modal(show: false);
我还为关闭按钮使用了以下属性：
data-dismiss="modal" data-target="#myModal"
【讨论】：
嗨，artjom。谢谢！将运行它并提供反馈。您没有使用à按钮打开模式？因为这就是我想要实现的。最初有一个模式启动，并且只在移动设备上提供一个快速导航菜单到位置（在桌面上不直接相关）就是这样的想法。 是的 data-dismiss="modal" data-target="#myModal" 解决了我的问题！应用！【参考方案3】：将类 hide 添加到模态
<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >
javascript 代码
<!-- Use this to hide the modal necessary for loading and closing the modal-->
<script>
$(function()
$('#closeModal').click(function()
$('#myModal').modal('hide');
);
);
</script>
<!-- Use this to load the modal necessary for loading and closing the modal-->
<script>
$(function ()
$('#myModal').modal('show');
);
</script>
【讨论】：
【参考方案4】：.modal('hide') 手动隐藏模式。使用以下代码关闭您的引导模型
$('#myModal').modal('hide');
看看工作codepen here
或者
在这里试试
$(function ()
$(".custom-close").on('click', function()
$('#myModal').modal('hide');
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<a class="custom-close"> My Custom Close Link </a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->【讨论】：
【参考方案5】：尝试使用 data-target 准确指定按钮应关闭的模式。所以你的按钮应该如下所示 -
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
此外，您应该只需要 bootstrap.modal.js，这样您就可以安全地删除其他的。
编辑：如果这不起作用，则删除可见电话类并在您的 PC 浏览器而不是手机上对其进行测试。这将显示您是否遇到了 javascript 错误，或者它是否存在兼容性问题。
编辑：演示代码
<html>
<head>
<title>Test</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
if( navigator.userAgent.match(/android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
)
$("#myModal").modal("show");
$("#myModalClose").click(function ()
$("#myModal").modal("hide");
);
);
</script>
</head>
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<a class="close" id="myModalClose">×</a>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
</body>
</html>
【讨论】：
嗨@Simon Cunningham Tnx 一百万回答！我已经输入了数据目标。没有工作（不幸的是）然后我删除了可见电话类。没有什么不同。code 文字介绍想要导航到...
...这里的链接列表 link2 link3code
<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal" data-target="#myModal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>
对不起，这里的文字混乱了；）我听从了你的建议。给关闭按钮一个准确的数据目标似乎是合乎逻辑的。但不知何故，我仍然没有让它工作。即使禁用可见电话。似乎不影响关闭按钮。 （这是一件好事）
您最初是如何打开模态的？尝试如下打开它 -打开模式
我在原始答案中添加了一些精简的演示代码。 javascript 和 css 文件是我的测试项目的本地文件，只需将它们替换为您自己的链接即可。【参考方案6】：
根据文档隐藏/切换应该可以工作。但事实并非如此。
这是我的做法
$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body
【讨论】：
这实际上是正确的“蛮力”答案.. 但我建议重写它以使动画正确：$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function() $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); );【参考方案7】：
试试这个..
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
【讨论】：
【参考方案8】：我在 iphone 或桌面上遇到了同样的问题，按下关闭按钮时没有设法关闭对话框。
我发现<button>标签定义了一个可点击的按钮，需要为元素指定type属性，如下所示：
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
检查引导模式的示例代码： BootStrap javascript Page
【讨论】：
【参考方案9】：如果您同时显示的模态很少，您可以为具有data-toggle 和data-target 属性的模态按钮指定目标模态：
<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title">Modal Title</h4>
<small>Modal Subtitle</small>
</div>
<div class="modal-body">
<p>Modal content text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
</div>
</div>
</div>
</div>
在模态代码之外的某个地方，您可以有另一个切换按钮：
<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>
当这些按钮隐藏时，用户无法单击模态切换按钮，并且它正确适用于属性data-toggle 的选项"modal"。该方案自动生效！
【讨论】：
【参考方案10】：这里有一个 sn-p，不仅可以在不刷新页面的情况下关闭模式，而且在按下 Enter 时它会提交模式并在不刷新的情况下关闭
我在我的网站上设置了它，在那里我可以有多个模态，一些模态在提交时处理数据，而有些则没有。我所做的是为每个进行处理的模式创建一个唯一的 ID。例如在我的网页中：
HTML（模态页脚）：
<div class="modal-footer form-footer"><br>
<span class="caption">
<button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button>
<button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a>
</span>
</div>
jQUERY：
$(document).ready(function()
// Allow enter key to trigger preloadorders form
$(document).keypress(function(e)
if(e.which == 13)
e.preventDefault();
if($(".trigger").is(".ok"))
$("#PreLoadOrders").trigger("click");
else
return;
);
);
正如你所见，这个提交执行了处理，这就是为什么我有这个 jQuery 用于这个模态。现在假设我在此网页中有另一个模态，但没有执行任何处理，并且由于一次打开一个模态，我将另一个 $(document).ready() 放在所有页面都获取的全局 php/js 脚本中，我给模态的关闭按钮一个类叫：".modal-close"：
HTML：
<div class="modal-footer caption">
<button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
jQuery（包括 global.inc）：
$(document).ready(function()
// Allow enter key to trigger a particular button anywhere on page
$(document).keypress(function(e)
if(e.which == 13)
if($(".modal").is(":visible"))
$(".modal:visible").find(".modal-close").trigger('click');
);
);
【讨论】：
以上是关于如何关闭 twitter 引导模式（初始启动后）的主要内容，如果未能解决你的问题，请参考以下文章
Twitter Bootstrap / jQuery - 如何暂时防止模式被关闭？