Bootstrap model blocks other elements in html page

Question

I have used a bootstrap model which works perfectly fine. but the issue is when I open the modal I am not able to edit the textbox as the modal completely blocks the text box from accessing it. How can I make the textbox editable even if bootstrap modal is opened? Below snippet reflects the above issue!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
<br><br><br><br><br><br>
<input type="text">

As shown in the above snippet, if I open modal box I will not be able to enter the values in textbox, so how to preserve modal box in open state and also enter the values in textbox?

Possible duplicate...https://stackoverflow.com/questions/34328357/cant-click-anything-after-i-open-my-bootstrap-modal — Jason Delaney, Nov 24 '17 at 15:09
Nope, its no duplicate. The question your linking at is a problem with the backdrop. Not the issue OP is asking here. — Red, Nov 24 '17 at 15:30

score 1 · Answer 1 · answered Nov 24 '17 at 15:45

1

JS:

$("#myModal").modal({
  backdrop: false
});

CSS:

.modal {
    pointer-events: none;
}

Example: https://codepen.io/anon/pen/RjJBxQ

answered Nov 24 '17 at 15:45

Ivan Venediktov

426
2
15

score 0 · Answer 2 · answered Nov 24 '17 at 15:35

Why would you wanna do that in the first place? The modal is meant to behave this way.

Why don't you place the textbox inside the modal itself?

Like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
          <input type="text">
        </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Anyhow, if you really want it the way you describe without breaking bootstrap. Here you go, it doesn't make any sense though. So I really woudn't recommend the example below.

.in-front-of-modal {
  position: relative;
  z-index: 9999;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
<br><br><br><br><br><br>
<input type="text" class="in-front-of-modal">

Bootstrap model blocks other elements in html page

2 Answers2