如何使用 Remodal 制作确认模态
How to make a confirmation modal with Remodal
我使用 Remodal ( https://github.com/VodkaBears/Remodal#remodal ) 制作一些模态,通常我只使用警报模态,但现在我想使用确认模态。
我制作了一个带有确认模式的删除按钮,我有以下代码:
$('#delete_button').click(function() {
$('[data-remodal-id = modal-delete]').remodal().open();
$(document).on('confirmation', '#modal-delete', function () {
alert('Confirmation button is clicked');
});
$(document).on('cancellation', '#modal-delete', function () {
alert('Cancel button is clicked');
});
});
<div class="remodal" data-remodal-id="modal-delete">
<div class="h1_modal">Delete confirmation</div>
<div class="p_modal">Are you sure?</div>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
当我单击 ID 为 delete_button
的按钮时,模式正在打开,但是当我选择“取消”或“确定”时,我没有看到任何警报。我怎样才能让它工作?
亲切的问候,
阿里
在删除点击事件之外添加取消和确定点击事件:
$('#delete_button').click(function() {
$('[data-remodal-id = modal-delete]').remodal().open();
// delete logic
});
$(document).on('click', '.remodal-confirm', function () {
alert('Confirmation button is clicked');
});
$(document).on('click', '.remodal-cancel', function () {
alert('Cancel button is clicked');
});
我的解决方案:
HTML:
<div data-remodal-id="alert">
<a data-remodal-action="cancel" class="remodal-cancel">X</a>
<div id="confirmation-box">
<p>You didn't create your alert. Do you really want to close this form?</p>
<a href="#" data-remodal-action="close" class="btn remodal-close">
<span>Close</span>
</a>
<a href="#" data-remodal-action="confirm" class="btn remodal-confirm">
<span>No</span>
</a>
</div>
JS:
var remodalInst = $('[data-remodal-id=alert]').remodal({
closeOnConfirm: false
});
$(document).on('cancellation', '.remodal', function () {
// disable other close options while modal is open
remodalInst.settings = {
closeOnCancel: false,
closeOnEscape: false,
closeOnOutsideClick: false
}
// show confirmation window
$('#confirmation-box').show();
// hide confirmation window after clicking "no" without hiding whole modal
$(document).on('confirmation', '.remodal', function () {
$('#confirmation-box').hide();
});
});
我使用 Remodal ( https://github.com/VodkaBears/Remodal#remodal ) 制作一些模态,通常我只使用警报模态,但现在我想使用确认模态。
我制作了一个带有确认模式的删除按钮,我有以下代码:
$('#delete_button').click(function() {
$('[data-remodal-id = modal-delete]').remodal().open();
$(document).on('confirmation', '#modal-delete', function () {
alert('Confirmation button is clicked');
});
$(document).on('cancellation', '#modal-delete', function () {
alert('Cancel button is clicked');
});
});
<div class="remodal" data-remodal-id="modal-delete">
<div class="h1_modal">Delete confirmation</div>
<div class="p_modal">Are you sure?</div>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
当我单击 ID 为 delete_button
的按钮时,模式正在打开,但是当我选择“取消”或“确定”时,我没有看到任何警报。我怎样才能让它工作?
亲切的问候,
阿里
在删除点击事件之外添加取消和确定点击事件:
$('#delete_button').click(function() {
$('[data-remodal-id = modal-delete]').remodal().open();
// delete logic
});
$(document).on('click', '.remodal-confirm', function () {
alert('Confirmation button is clicked');
});
$(document).on('click', '.remodal-cancel', function () {
alert('Cancel button is clicked');
});
我的解决方案:
HTML:
<div data-remodal-id="alert">
<a data-remodal-action="cancel" class="remodal-cancel">X</a>
<div id="confirmation-box">
<p>You didn't create your alert. Do you really want to close this form?</p>
<a href="#" data-remodal-action="close" class="btn remodal-close">
<span>Close</span>
</a>
<a href="#" data-remodal-action="confirm" class="btn remodal-confirm">
<span>No</span>
</a>
</div>
JS:
var remodalInst = $('[data-remodal-id=alert]').remodal({
closeOnConfirm: false
});
$(document).on('cancellation', '.remodal', function () {
// disable other close options while modal is open
remodalInst.settings = {
closeOnCancel: false,
closeOnEscape: false,
closeOnOutsideClick: false
}
// show confirmation window
$('#confirmation-box').show();
// hide confirmation window after clicking "no" without hiding whole modal
$(document).on('confirmation', '.remodal', function () {
$('#confirmation-box').hide();
});
});