引导程序 4 - 避免屏幕单击的模式关闭
Bootstrap 4 - Avoid modal closing for on-screen click
在rails 4中,我正在使用引导插件。当我使用模态功能时,我需要解决关闭事件问题。当模式打开时,当我单击"x"图标或"Esc"按钮时,它应该关闭,否则它应该始终打开。现在,当我单击不包括模态表单区域的屏幕时,它将接近。
在main.erb中,
<div class="modal fade" id="main-lightbox-container" tabindex="-1" role="dialog" aria-labelledby="main-lightbox-container" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
在形式上.js.erb,
var content = "<%= escape_javascript(render(:partial=>"form", :locals=>{:user=>@user})) %>";
var container = $('#main-lightbox-container');
container.find('.modal-content').html(content);
container.modal({});
在这里,我正在通过 ajax 请求加载模态表单。如何解决此屏幕点击问题?请帮助我。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<div data-toggle="modal" data-target="#modalid">Open</div>
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body" style="background-color: #F0F0F0">
Content
</div>
</div>
</div>
<div id="myModal" data-keyboard="false" data-backdrop="static">
just add data-keyboard="False" and data-backdrop="static" it works for me.
相关文章:
- 如何根据在模式中单击的按钮发送参数
- 缩略图单击时图像未以模式显示
- 单击引导模式锚点时添加 URL 哈希
- 在单击 UI 网格上的链接时引导模式
- 单击按钮并将其下载为图像格式时,如何使用引导模式弹出窗口显示D3图表
- 在引导程序中单击关闭时隐藏模式
- 尝试单击图像并打开模式ajax
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 单击按钮打开窗口作为使用javascript的模式对话框
- 在简单模式中,取消单击时不会调用onClose事件..当我在simple-modal上加载另一个jquery对话框时
- jQuery - 用户单击模式上的“是”按钮后返回到初始屏幕
- 我如何知道引导模式关闭时单击了哪个按钮
- CasperJS单击无法显示模式窗口
- 如何在Chrome的自助服务终端模式下禁用右键单击/长按的上下文菜单
- 引导模式在单击时打开并保持打开状态 10 秒
- 在模式窗口中显示页面上单击的值(链接)以及索引值
- j查询 UI 模式对话框在叠加单击时全局关闭
- 在“JQuery 模式”对话框中指定图像单击侦听器
- 如何在单击外部时关闭模式
- Meteor将值从模式单击事件传递到父模板