Twitter Bootstrap Question posted in

Inputs in Bootstrap and Jquery-ui stacked modal are not working-Twitter bootstrap

When a bootstrap modal initiate from a Jquery-ui dialog modal, all input type text / textarea within bootstrap modal are not editable/focusable. Here is an example of this problem. I have tried changing z-index value of both modal but it did not worked.

https://codepen.io/tamimibrahim17/pen/RwwLZeK

jQuery(document).ready(function($){

  $(document).on('click', '#show-ui-modal', function(){

      $("#eventContent").dialog({ 
          modal: true, 
          title: 'some title', 
          width:550, 
          clickOutside: false
      });
  });
  
  $(document).on('click', '#show-modal', function(){
    $('#blank-modal').modal('show');
  });
  
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



<button id="show-ui-modal">Show ui modal</button>

<div id="eventContent" title="Event Details" style="display:none;" data-msg="" data-done="">
    <div id="view">
      <button id="show-modal">Show Bootstrap modal</button>
  </div>
    <p id="eventInfo"></p>
</div>

<div class="modal fade" role="dialog" id="blank-modal" data-focus="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">A modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the modal body
        <form action="#">
          <div class="form-group">
            <label for="input1">
              Input working?
            </label>
            <input type="text" name="input1" id="input1" class="form-control">
          </div>
          <div class="form-group">
            <label for="checkbox1">
              CheckBox working?
              <input type="checkbox" name="checkbox1" id="checkbox1">
            </label>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to solve this by changing Jquery-ui dialog modal parameter to false.

    jQuery(document).ready(function($){

  $(document).on('click', '#show-ui-modal', function(){

      $("#eventContent").dialog({ 
          modal: false, 
          title: 'some title', 
          width:550, 
          clickOutside: false
      });
  });
  
  $(document).on('click', '#show-modal', function(){
    $('#blank-modal').modal('show');
  });
  
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



<button id="show-ui-modal">Show ui modal</button>

<div id="eventContent" title="Event Details" style="display:none;" data-msg="" data-done="">
    <div id="view">
      <button id="show-modal">Show Bootstrap modal</button>
  </div>
    <p id="eventInfo"></p>
</div>

<div class="modal fade" role="dialog" id="blank-modal" data-focus="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">A modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the modal body
        <form action="#">
          <div class="form-group">
            <label for="input1">
              Input working?
            </label>
            <input type="text" name="input1" id="input1" class="form-control">
          </div>
          <div class="form-group">
            <label for="checkbox1">
              CheckBox working?
              <input type="checkbox" name="checkbox1" id="checkbox1">
            </label>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


  2. 0

    You can try adding data-backdrop=static and data-keyboard="false" attributes in the code below:

    <div class="modal hide fade" role="dialog" id="blank-modal" data-focus="true" data-backdrop="static" data-keyboard="false">

    OR try with this jQuery code.

    $('#blank-modal').modal({
    backdrop: 'static',
    keyboard: false
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search