我有一个页面,其中包含几个bootstrap modals:
data-toggle="modal" data-target="#modal-12345"
字符串
问题是,我有一整张表都是可点击的,比如
<tr data-toggle="modal" data-target="#modal-12345">
型
模态内容位于正下方的另一个隐藏表行中,后面是下一个可单击的行,依此类推。现在,该行还包含一个按钮,单击该按钮时将转到另一个页面。
我需要整行可点击,所以它打开了模态,除了当按钮转到其他页面被点击,那么我需要停止打开模态。
我需要这样的东西
<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>
型
但针对这一点:
data-toggle="modal"
型
我还尝试给TR一个“modaltoggle”类,然后用JavaScript作为.modaltoggle调用它,但这也不起作用。
4条答案
按热度按时间cx6n0qe31#
为不想触发模态的项添加某种标识符,例如
no-modal
类,然后在jQuery中为模态的show.bs.modal
事件添加代码。捕获触发事件的元素relatedElement,然后查看它是否具有您要查找的类。如果是,运行e.stopPropagation()
。BOOTPLY
jQuery:
字符串
HTML:
型
如您所见,第二个按钮有一个名为
no-modal
的类。当单击时,jQuery检查该类是否存在,如果存在,则阻止模态弹出。单击第一个按钮会导致模态正常弹出,因为它没有该类。引导模态在页面上的元素弹出时触发特定的事件,从它们被触发的那一刻起,到它们完全弹出的那一刻。您可以阅读这些事件,以了解您可以通过查看官方文档中的事件部分来使用它们。
a0zr77ik2#
字符串
或
型
return(); public void run();它将不工作,如果你去重新打开模态或如果多个模态使用在您的网页。
deyfvvtc3#
下面是一个JSFiddle来演示我将要解释的内容:http://jsfiddle.net/68y4zb3g/
正如MattD所解释和演示的,阻止一个模态启动是相当容易的,尽管他的例子适用于标准模态应用程序。由于您在脚本代码中使用了
.btn
,我假设您将它应用于所有有问题的按钮。我还假设您保留了与Bootstrap演示页面上类似的模态代码。如果您提供实际的表代码,我可以根据您已经拥有的内容专门定制它。注意:我用
DIV
代替了TD
,它通常作为模式的外部 Package 器,并添加了一个CSS小技巧,使其更容易看到内容中的分离。通过使用应用于所有按钮的类,您不必为每个ID编写函数。话虽如此,我建议使用自定义类作为触发器。
.btn
是Bootstrap核心中的一个标准类,因此请尝试使用.modalBtn
,以防止与合法的Bootstrap功能发生冲突。希望这对你有帮助。^^
yqkkidmi4#
1.从代码中删除以下行:
data-toggle =“模态”
然后,在验证完成后,在函数中编写以下代码:
字符串