Входы в Bootstrap и Jquery-ui с накоплением модальных не работают

Question

Когда модальный режим начальной загрузки запускается из модального диалогового окна Jquery-ui, все входные текстовые / текстовые области в модальном режиме начальной загрузки не доступны для редактирования / фокусировки. Вот пример этой проблемы. Я попытался изменить z-index значение обоих модальных, но это не сработало.

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>

Answer 1

Мне удалось решить эту проблему, изменив модальный параметр Jquery-ui dialog на 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>

Answer 2

Вы можете попробовать добавить атрибуты data-backdrop=static и data-keyboard="false" в коде ниже:

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

ИЛИ попробуйте этот код jQuery.

$('#blank-modal').modal({
    backdrop: 'static',
    keyboard: false
})