Bootstrap close modal not working(引导关闭模式不起作用)
问题描述
我这里有两个按钮用于关闭模式.第一个是关闭图标,另一个是取消按钮,两者都使用 data-dismiss 来关闭模式.但是,它们都不起作用.我对另一个模态使用相同的代码,它们工作正常.有什么猜测吗?
I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another modal and there they are working fine. Any guesses?
<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
<div class="modal-dialog">
<div id="timeSelectModalContent" class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<label>
<input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
<label class="checkbox-label">Thursday, 08:00 pm.</label>
</label>
<br>
<label>
<input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
<label class="checkbox-label">Thursday, 09:30 pm.</label>
</label>
<div id="time-modal-footer" class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
</div>
</div>
</div>
</div>
推荐答案
去掉fade"类.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
改成
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
淡入淡出是一种效果,如果你去掉淡入淡出,你的模态将没有淡入淡出效果.导致这个问题的几个问题是没有用正确的方法调用模态.
Fade is an effect, if you remove fade, your modal will not have fade effect. The several problem which cause this issue is not call modal with right method.
方法错误:$("#myModal").show();
正确的方法:$("#myModal").modal('show');
这篇关于引导关闭模式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:引导关闭模式不起作用
基础教程推荐
- 如何添加到目前为止的天数? 2022-01-01
- Bootstrap 模态出现在背景下 2022-01-01
- fetch 是否支持原生多文件上传? 2022-01-01
- 即使用户允许,Gmail 也会隐藏外部电子邮件图片 2022-01-01
- Bokeh Div文本对齐 2022-01-01
- 原生拖动事件后如何获取 mouseup 事件? 2022-01-01
- 检查 HTML5 拖放文件类型 2022-01-01
- 在 contenteditable 中精确拖放 2022-01-01
- Fabric JS绘制具有活动形状的多边形 2022-01-01
- npm start 错误与 create-react-app 2022-01-01
