javascript - Stop modal from closing on outside click or esc

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');
  });

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');
  });

Share Improve this question edited Jun 9, 2022 at 16:52 j08691 208k32 gold badges269 silver badges280 bronze badges asked Jun 9, 2022 at 16:49 505notfound 132 silver badges6 bronze badges

I'm not seeing any modal in your code here jsfiddle/0y395mbr Can you explain exactly what is wrong? – MFerguson Commented Jun 9, 2022 at 16:50
@MFerguson I'm trying to disable outside click (closing the modal) i want the modal to stop the user from using the page unless using the suggested buttons – 505notfound Commented Jun 9, 2022 at 16:53
The center element is deprecated. Don't use it. Bootstrap offers several ways to center things, so you don't need it anyway. – isherwood Commented Jun 9, 2022 at 19:17

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

you can use "data-bs-backdrop" and "data-bs-keyboard" attributes instead of data-backdrop="static" data-keyboard="false". Bootstrap 5 has made changes to the naming conventions, and the data-backdrop and data-keyboard attributes are now prefixed with bs-.

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/npm/[email protected]/dist/css/bootstrap.min.css">

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr/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>

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>

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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745565541a4633370.html

javascript - Stop modal from closing on outside click or esc - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Stop modal from closing on outside click or esc - Stack Overflow

4 Answers 4

相关推荐