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');
这篇关于引导关闭模式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:引导关闭模式不起作用
- Fetch API 如何获取响应体? 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
