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

您可以尝试在下面的代码中添加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
})

Answer 2

我可以通过将 Jquery-ui dialog modal 参数更改为 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>