防止在单击外部或按Escape键时Bootstrap Modal消失？\[重复\]

html HTML

路易老丝

2020-03-20

我将Twitter Bootstrap模态用作向导窗口，并希望防止用户在模态之外单击或按Escape键时将其关闭。相反，我希望在用户按下“完成”按钮时将其关闭。我如何实现这种情况？

第2439篇《防止在单击外部或按Escape键时Bootstrap Modal消失？\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
EvaA 2020.03.20 
<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我认为此Codepen可以帮助您 防止模式关闭CSS和自举

西门米亚 2020.03.20

Your code is working when i click out side the modal, but if i use html input field inside modal-body then focus your cursor on that input then press esc key the modal has closed. Click here

斯丁小胖Jim 2020.03.20 
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
Tom蛋蛋 2020.03.20

我使用这些属性，并且有效， data-keyboard="false" data-backdrop="static"

西里小胖小卤蛋 2020.03.20

只需向该模式添加data-backdrop="static"和data-keyboard="false"属性即可。

例如。

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
樱泡芙 2020.03.20

您也可以在引导程序模型中使用Direct。 

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
老丝小卤蛋梅 2020.03.20

也可以工作，data-backdrop="static"单击以退出并data-keyboard="false"进入div模式中的Esc：

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android