Stop modal from closing on outside click or esc-CodePudding

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 >


<hr >


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

  <div  role="document">
    <div >
      <div >
        <center><h1  id="exampleModalLabel">Want more?</h1></center>
      
      

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

javascript:

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

CodePudding user response：

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 >
    <hr >
    <!-- Modal -->
    <div  id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div  role="document">
        <div >
          <div >
            <center>
              <h1  id="exampleModalLabel">Want more?</h1>
            </center>
          </div>
          <div >
            <strong>Create an account or Log in to see additional search results...</strong>
          </div>
          <div >
            <button type="button"  data-dismiss="modal">Sign up</button>
            <button type="button" >Log In</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Use this -

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