Question

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

$('.modal-dialog').draggable(); //for drag
$('.modal-content').resizable({}); //for resize

https://jsfiddle.net/kuoh639o/5/

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

Answer 1

“模态”通常表示弹出窗口，当打开页面上的其他项目时将被禁用。这是bootstrap模态组件的行为，因此就是名称。

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

下面是一个使用相同的简单演示。

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对话框中使用引导组件（我想不出一个好的理由），我认为他们最接近的赌注是引导程序的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>

如何设置激活背景元素的bootstrap模态对话框

1 个答案: