bootstrap模态框内的bootstrap确认如何使用?
How to use the bootstrap confirmation within the bootstrap modal box?
我想在bootstrap模态框中使用bootstrap确认http://ethaizone.github.io/Bootstrap-Confirmation/#example .
然而,在调用模态框时,我是通过 ajax post 方法调用模态框的。在调用模态框时,我还包含了一些脚本,但它不起作用。
我在jquery中发送的脚本是http://www.jqueryscript.net/other/Clean-jQuery-Confirmation-Dialog-Plugin-with-Bootstrap-Popovers-Bootstrap-Confirmation.html
在模态框中使用了此脚本window...
<script>
$(function(){
$('[data-toggle="confirmation"]').confirmation();
$('[data-toggle="confirmation"]').confirmation({
placement: 'top', // How to position the confirmation - top | bottom | left | right
trigger: 'click', // How confirmation is triggered - click | hover | focus | manual
target : '_self', // Default target value if `data-target` attribute isn't present.
href : '#', // Default href value if `data-href` attribute isn't present.
title: 'Are you sure?', // Default title value if `data-title` attribute isn't present
template: '<div class="popover">' +
'<div class="arrow"></div>' +
'<h3 class="popover-title"></h3>' +
'<div class="popover-content text-center">' +
'<div class="btn-group">' +
'<a class="btn btn-small" href="" target=""></a>' +
'<a class="btn btn-small" data-dismiss="confirmation"></a>' +
'</div>' +
'</div>' +
'</div>',
btnOkClass: 'btn-primary', // Default btnOkClass value if `data-btnOkClass` attribute isn't present.
btnCancelClass: '', // Default btnCancelClass value if `data-btnCancelClass` attribute isn't present.
btnOkLabel: '<i class="icon-ok-sign icon-white"></i> Yes', // Default btnOkLabel value if `data-btnOkLabel` attribute isn't present.
btnCancelLabel: '<i class="icon-remove-sign"></i> No', // Default btnCancelLabel value if `data-btnCancelLabel` attribute isn't present.
singleton: false, // Set true to allow only one confirmation to show at a time.
popout: false, // Set true to hide the confirmation when user clicks outside of it.
onConfirm: function(){}, // Set event when click at confirm button
onCancel: function(){}}) // Set event when click at cancel button
});
</script>
我刚刚为您制作了一个演示。它可能对你有帮助。
请检查以下 fiddle - http://bit.ly/1aD42Y8
如果您的模态框由 ajax 调用,您必须知道模态框内的元素是已删除的元素。
在此处查看第 直接和委托事件
https://api.jquery.com/on/
那么你应该这样使用它:
$(document).find('[data-toggle="confirmation"]').confirmation();
通过这种方式,您可以访问由 javascript 或在 ajax 操作中添加的委托元素。
我想在bootstrap模态框中使用bootstrap确认http://ethaizone.github.io/Bootstrap-Confirmation/#example .
然而,在调用模态框时,我是通过 ajax post 方法调用模态框的。在调用模态框时,我还包含了一些脚本,但它不起作用。
我在jquery中发送的脚本是http://www.jqueryscript.net/other/Clean-jQuery-Confirmation-Dialog-Plugin-with-Bootstrap-Popovers-Bootstrap-Confirmation.html
在模态框中使用了此脚本window...
<script>
$(function(){
$('[data-toggle="confirmation"]').confirmation();
$('[data-toggle="confirmation"]').confirmation({
placement: 'top', // How to position the confirmation - top | bottom | left | right
trigger: 'click', // How confirmation is triggered - click | hover | focus | manual
target : '_self', // Default target value if `data-target` attribute isn't present.
href : '#', // Default href value if `data-href` attribute isn't present.
title: 'Are you sure?', // Default title value if `data-title` attribute isn't present
template: '<div class="popover">' +
'<div class="arrow"></div>' +
'<h3 class="popover-title"></h3>' +
'<div class="popover-content text-center">' +
'<div class="btn-group">' +
'<a class="btn btn-small" href="" target=""></a>' +
'<a class="btn btn-small" data-dismiss="confirmation"></a>' +
'</div>' +
'</div>' +
'</div>',
btnOkClass: 'btn-primary', // Default btnOkClass value if `data-btnOkClass` attribute isn't present.
btnCancelClass: '', // Default btnCancelClass value if `data-btnCancelClass` attribute isn't present.
btnOkLabel: '<i class="icon-ok-sign icon-white"></i> Yes', // Default btnOkLabel value if `data-btnOkLabel` attribute isn't present.
btnCancelLabel: '<i class="icon-remove-sign"></i> No', // Default btnCancelLabel value if `data-btnCancelLabel` attribute isn't present.
singleton: false, // Set true to allow only one confirmation to show at a time.
popout: false, // Set true to hide the confirmation when user clicks outside of it.
onConfirm: function(){}, // Set event when click at confirm button
onCancel: function(){}}) // Set event when click at cancel button
});
</script>
我刚刚为您制作了一个演示。它可能对你有帮助。 请检查以下 fiddle - http://bit.ly/1aD42Y8
如果您的模态框由 ajax 调用,您必须知道模态框内的元素是已删除的元素。
在此处查看第 直接和委托事件 https://api.jquery.com/on/
那么你应该这样使用它:
$(document).find('[data-toggle="confirmation"]').confirmation();
通过这种方式,您可以访问由 javascript 或在 ajax 操作中添加的委托元素。