停止模态关闭外面单击或ESC

发布于 2025-02-06 12:16:42 字数 1238 浏览 2 评论 0原文

嗨，我试图禁用外部，请单击我的模态。我尝试使用诸如背景：'static'，键盘：false之类的方法，但我似乎无法使其起作用

html：

<div class="container my-5">


<hr class="my-5">


<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data- 
keyboard="false">

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
      
      

        </button>
      </div>
      <div class="modal-body">
        <strong>Create an account or Log in to see additional search results...</strong>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
        <button type="button" class="btn btn-primary">Log In</button>
      </div>
     </div>
    </div>
   </div>

javaScript：

  $(function() {
  $('#basicExampleModal').modal('show');
  });

原文

Hi im trying to disable outside click in my modal. I've tried using methods like backdrop: 'static', keyboard: false but i cant seem to make it work

html:

<div class="container my-5">


<hr class="my-5">


<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data- 
keyboard="false">

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
      
      

        </button>
      </div>
      <div class="modal-body">
        <strong>Create an account or Log in to see additional search results...</strong>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
        <button type="button" class="btn btn-primary">Log In</button>
      </div>
     </div>
    </div>
   </div>

javascript:

  $(function() {
  $('#basicExampleModal').modal('show');
  });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离笑几人歌 2025-02-13 12:16:42

您可以使用“ data-bsbackdrop”和“ data-bs-kekeboard”属性，而不是data-backDrop =“ static” data-keyboard =“ false”。 Bootstrap 5已更改命名约定，并且数据键盘板和数据键板的属性现在以BS-为前缀。

回复收藏 0 原文

情深已缘浅 2025-02-13 12:16:42

您发布的代码中有几个语法问题。前任。额外的＆lt;/button＆gt;标签和data-keyboard =“ false”＆gt;有一个空间。除了语法问题外，它应该按照预期的方式工作，如您从下面的示例中所见。如果您的目的仍然不起作用，则代码中其他地方还有其他问题。

$('#basicExampleModal').modal('show');

<html lang="en">

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container my-5">
    <hr class="my-5">
    <!-- Modal -->
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <center>
              <h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
            </center>
          </div>
          <div class="modal-body">
            <strong>Create an account or Log in to see additional search results...</strong>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
            <button type="button" class="btn btn-primary">Log In</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

You have couple syntax issues in the code you posted. Ex. extra </button> tag and data- keyboard="false"> has a space in it. Aside from the syntax issues, it should work as expected as you can see from below example. If it still doesn't work on your end, there is something else wrong elsewhere in your code.

$('#basicExampleModal').modal('show');

<html lang="en">

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container my-5">
    <hr class="my-5">
    <!-- Modal -->
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <center>
              <h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
            </center>
          </div>
          <div class="modal-body">
            <strong>Create an account or Log in to see additional search results...</strong>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
            <button type="button" class="btn btn-primary">Log In</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

回复收藏 0 原文

小草泠泠 2025-02-13 12:16:42

在我的情况下，我使用了Bootstrap 5

<div
        class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
        labelledby="exampleModalLabel" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static"

        >
</div>

Bootstrap 4

<div
        class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
        labelledby="exampleModalLabel" aria-hidden="true"
        data-keyboard="false" data-backdrop="static"

        >
</div>

In my case I used Bootstrap 5

<div
        class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
        labelledby="exampleModalLabel" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static"

        >
</div>

Bootstrap 4

<div
        class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
        labelledby="exampleModalLabel" aria-hidden="true"
        data-keyboard="false" data-backdrop="static"

        >
</div>

回复收藏 0 原文

最笨的告白 2025-02-13 12:16:42

使用以下方式：

$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
    keyboard: false,
    backdrop: 'static'
  })
});

此脚本现在将通过单击模式外或按下 esc 键来关闭模式。

Use this:

$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
    keyboard: false,
    backdrop: 'static'
  })
});

This script will now allow close the modal by clicking outside the modal or by pressing the esc key.

回复收藏 0 原文

~没有更多了~

关于作者

羁客

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

停止模态关闭外面单击或ESC

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

停止模态关闭外面单击或ESC

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。