如何设置引导模式对话框与背景元素活动

How to set bootstrap modal dialog with background elements active

本文关键字：对话框 模式 背景 活动 元素 何设置 设置      更新时间：2023-09-26

在我的页面中，我有一个引导对话框，一旦用户打开对话框，他可以拖动和调整对话框的大小。此外，我希望在不关闭对话框的情况下，用户可以与页面中的其他项目进行交互。所以我在这里搜索并实现了可拖动和可调整大小的功能。但问题是，一旦模式打开，背景元素将禁用。一旦模式关闭，背景元素将被激活。我检查了css的z-index属性阻碍了背景元素的交互。我也创建了一个小提琴

$('.modal-dialog').draggable(); //for drag
$('.modal-content').resizable({}); //for resize
https://jsfiddle.net/kuoh639o/5/

编辑:我改变了小提琴，现在部分实现了解决方案。https://jsfiddle.net/kuoh639o/7/现在的问题是模态的高度和宽度远远大于模态内容

"Modal"一般表示弹出，打开时页面上的其他项将被禁用。这是bootstrap模态组件的行为，因此得名

如果你不想要这个行为，因为你有jQuery UI可用，你可以使用它的dialog组件代替，它可以选择性地使行为像一个模态，如果需要。最好的部分是默认情况下它们是可拖动和可调整大小的。

下面是一个简单的示例。

var $dialog = $('#dialog');
$dialog.dialog({
  autoOpen: false
});
$('#open').on('click', function() {
  $dialog.dialog('open');
});
<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button type="button" id="open">
  1st click here then drag and resize the modal
</button>
<br>
<br>
<button type="button">Next I want to click here without close the modal</button>

出于某种原因，如果有人想在jQuery UI对话框上使用bootstrap组件(我想不出一个好的理由)，我认为他们最接近的选择是bootstrap的popover组件(下面的演示有一个可调整大小的问题，但应该是可以修复的)。

$('#open').popover({
  html: true,
  content: function() {
    return $('#template').html();
  },
  placement: 'bottom'
}).on('inserted.bs.popover', function() {
  $('.popover').draggable()
    .resizable();
});
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="open">
  1st click here then drag and resize the modal
</button>
<br>
<br>
<button type="button">Next I want to click here without close the modal</button>
<script type="text/tmplate" id="template">
  <div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="background-color: transparent;" data-backdrop="false" data-keyboard="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Notes</h4>
        </div>
        <div class="modal-body">
          Sample text Sample text Sample text Sample text Sample text Sample text Sample text
        </div>
      </div>
    </div>
  </div>
</script>

相关文章：