我希望用户能够将模式框拖动到不同的位置,就像如何使用JQuery UI对话框完成一样。
我在官方的语义UI文档中发现,模态有"可拆卸"的设置,它似乎有我想要的描述。但是,即使将其设置为 true,似乎也无法让我拖动模态。有人可以帮我吗?
这是到目前为止的代码:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
语义
UI目前不支持像JQuery UI那样的可拖动模态。
可拆卸选项的默认值已经为 true,这意味着如果您打开一个新的模式,前一个模式将被移动到背景(= 调光器)并且不再可用(以较深的颜色可视化)。