如何设置后台元素活动的引导模式对话框

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

"Modal“通常指弹出，当打开页面上的其他项目时将被禁用。这是引导模态组件的行为，因此得名。

如果您不想要这种行为，因为您有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对话框上使用引导组件(我想不出一个很好的理由)，我认为他们最近的赌注是引导的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>

​