背景：在撰写本文时，Fomantic-UI是Semantic-UI的实时开发分支，有一天将被集成到Semantic-UI中，同时它实际上是Semantic-UI的支持类。
问题：Fomantic-UI提供了一种模态功能-只需在JQuery元素上调用.modal（）就可以了。但是，当关闭模态时，模态元素的DOM元素仍隐藏在DOM中。我的用例要求删除那些元素，但是我担心模态功能的“剩余”布线。
已完成研究：FUI documentation on modals很有用，但是从提高模态的角度编写的，但并没有彻底删除它。
复制：下面的代码段是基于代码的方法，用于为按钮侦听器创建模式和连线。单击按钮打开模态，然后单击关闭按钮。两秒钟后，将显示剩余的DOM模式元素的简单JQuery计数-应该为零，但应为1。
注意：
FUI模态具有令人沮丧的功能，可在单击任何按钮时自动关闭模态。它有一个保存子句，即如果触发的按钮事件处理程序返回false，则模式保持打开状态。显然，如果您要进行表单验证等，则需要知道这一点。此外，如果您希望覆盖所有按钮的默认功能，请从onHide函数返回false，例如
element.modal（'setting'，'onHide'，function（）{return false;}）;element.modal（'show'）;
此代码段使用的是FUI的“ dist”版本。由于FUI经常更改，因此如果您看到这些更改时，片段可能会失败。在撰写本文时，流行的CDN的正式发行版是2.7.8。
var fnSpecial = function(){
console.log('Close button click function - return true to hide');
// ... do function activity here....
return true;
}
$('#b1').on('click', function(){
makeModal({
title: 'I be modal',
content: 'Modal be I !',
actions: [
{ text: 'Close', fn: fnSpecial}, // for more buttons in the modal add more entries here.
]
})
})
function makeModal(opts){
// create your modal element - I grab the modal template
var tplt = $('#modalTemplate').html();
// defaults for modal create
var obj = {
title: 'No title !',
content: 'No content',
actions: [
]
}
// Merge the above defaults with the user-supplied options
obj = $.extend(obj, opts);
// Apply modal options to the soon-to-be modal element
var ele = $(tplt);
ele.find('.modalHeading').html(obj.title);
ele.find('.modalBody').html(obj.content);
ele.addClass('modalContentCopy');
var modalButtons = ele.find('.modalButtons');
for (var i =0, max = obj.actions.length; i < max; i = i + 1 ){
var btn = $('<button >' + obj.actions[i].text + '</button>');
var fn = obj.actions[i].fn;
btn.data('fn', fn); // store the callback on the element to avoid closures.
btn.appendTo(modalButtons);
btn.on('click', function(e){
var fn = $(this).data('fn');
if (typeof fn === "function"){
var hide = fn(); // IMPORTANT: the function triggered for the button must return true to close the modal or false to keep it open !
console.log('Button says hide=' + hide)
if (hide){
ele.modal('destroy');
ele.modal('hide');
$('#info')
.html('***');
// wait 2 secs and see if the DOM element has gone
setTimeout( function(){
var num = $('.modalContentCopy').length;
$('#info')
.html(num)
.css({ backgroundColor: (num === 0 ? 'lime' : 'red')});
}, 2000);
}
}
});
}
// Simple example of how to reveal the modal element as a f-ui modal
ele
.appendTo($('body'))
.modal('setting', 'transition', "vertical flip")
.modal('setting', 'onHide', function(){ return false; }) // stop the auto-closing by FUI
.modal('show'); // finally show the modal
}p {
padding: 10px;
}
.modalContent {
border: 1px solid lime;
margin: 5px;
padding: 5px;
}
.modalHeading {
border: 1px solid cyan;
margin: 5px;
padding: 5px;
}
.modalBody {
border: 1px solid magenta;
margin: 5px;
padding: 5px;
}
.modalContent {
background-color: white;
}
.ipt {
margin: 5px 20px;
display: block;
}<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal, then the 'Close' button to close it. See console for messages. The critical point is the final display of the modal artefact count which appears after a 2 second delay, allowing for transitions to complete. We want a zero - what will it be?
</p>
<p>
<button id='b1'>Show a modal</button> <span>Count of DOM artifacts after close should be zero - value is >>>>> </span><span id='info'>[value will appear here after modal close]</span>
</p>
<div id='modalTemplate' style='display: none;'>
<div class='modalContent'>
<div class='modalHeading'>
I am the heading
</div>
<div class='modalBody'>
I am the body
</div>
<div class='modalButtons'>
</div>
</div>
</div>
</body>答案是使用当前