我有一个HTML表的行绑定到数据库行。我希望每行都有一个“删除行”链接，但我想事先与用户确认。
有没有办法使用Twitter引导模式对话框来做到这一点?
当前回答
你可以尝试更多可重用的我的解决方案与回调函数。在这个函数中，您可以使用POST请求或一些逻辑。 使用的库:JQuery 3>和Bootstrap 3>。
https://jsfiddle.net/axnikitenko/gazbyv8v/
测试的Html代码:
...
<body>
<a href='#' id="remove-btn-a-id" class="btn btn-default">Test Remove Action</a>
</body>
...
Javascript:
$(function () {
function remove() {
alert('Remove Action Start!');
}
// Example of initializing component data
this.cmpModalRemove = new ModalConfirmationComponent('remove-data', remove,
'remove-btn-a-id', {
txtModalHeader: 'Header Text For Remove', txtModalBody: 'Body For Text Remove',
txtBtnConfirm: 'Confirm', txtBtnCancel: 'Cancel'
});
this.cmpModalRemove.initialize();
});
//----------------------------------------------------------------------------------------------------------------------
// COMPONENT SCRIPT
//----------------------------------------------------------------------------------------------------------------------
/**
* Script processing data for confirmation dialog.
* Used libraries: JQuery 3> and Bootstrap 3>.
*
* @param name unique component name at page scope
* @param callback function which processing confirm click
* @param actionBtnId button for open modal dialog
* @param text localization data, structure:
* > txtModalHeader - text at header of modal dialog
* > txtModalBody - text at body of modal dialog
* > txtBtnConfirm - text at button for confirm action
* > txtBtnCancel - text at button for cancel action
*
* @constructor
* @author Aleksey Nikitenko
*/
function ModalConfirmationComponent(name, callback, actionBtnId, text) {
this.name = name;
this.callback = callback;
// Text data
this.txtModalHeader = text.txtModalHeader;
this.txtModalBody = text.txtModalBody;
this.txtBtnConfirm = text.txtBtnConfirm;
this.txtBtnCancel = text.txtBtnCancel;
// Elements
this.elmActionBtn = $('#' + actionBtnId);
this.elmModalDiv = undefined;
this.elmConfirmBtn = undefined;
}
/**
* Initialize needed data for current component object.
* Generate html code and assign actions for needed UI
* elements.
*/
ModalConfirmationComponent.prototype.initialize = function () {
// Generate modal html and assign with action button
$('body').append(this.getHtmlModal());
this.elmActionBtn.attr('data-toggle', 'modal');
this.elmActionBtn.attr('data-target', '#'+this.getModalDivId());
// Initialize needed elements
this.elmModalDiv = $('#'+this.getModalDivId());
this.elmConfirmBtn = $('#'+this.getConfirmBtnId());
// Assign click function for confirm button
var object = this;
this.elmConfirmBtn.click(function() {
object.elmModalDiv.modal('toggle'); // hide modal
object.callback(); // run callback function
});
};
//----------------------------------------------------------------------------------------------------------------------
// HTML GENERATORS
//----------------------------------------------------------------------------------------------------------------------
/**
* Methods needed for get html code of modal div.
*
* @returns {string} html code
*/
ModalConfirmationComponent.prototype.getHtmlModal = function () {
var result = '<div class="modal fade" id="' + this.getModalDivId() + '"';
result +=' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
result += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
result += this.txtModalHeader + '</div><div class="modal-body">' + this.txtModalBody + '</div>';
result += '<div class="modal-footer">';
result += '<button type="button" class="btn btn-default" data-dismiss="modal">';
result += this.txtBtnCancel + '</button>';
result += '<button id="'+this.getConfirmBtnId()+'" type="button" class="btn btn-danger">';
result += this.txtBtnConfirm + '</button>';
return result+'</div></div></div></div>';
};
//----------------------------------------------------------------------------------------------------------------------
// UTILITY
//----------------------------------------------------------------------------------------------------------------------
/**
* Get id element with name prefix for this component.
*
* @returns {string} element id
*/
ModalConfirmationComponent.prototype.getModalDivId = function () {
return this.name + '-modal-id';
};
/**
* Get id element with name prefix for this component.
*
* @returns {string} element id
*/
ModalConfirmationComponent.prototype.getConfirmBtnId = function () {
return this.name + '-confirm-btn-id';
};
其他回答
我可以很容易地使用bootbox.js库处理这种类型的任务。首先，你需要包括引导框JS文件。然后在你的事件处理函数中简单地写以下代码:
bootbox.confirm("Are you sure to want to delete , function(result) {
//here result will be true
// delete process code goes here
});
官方引导盒js 网站
我发现这个很有用，很容易使用，而且看起来很漂亮:http://maxailloud.github.io/confirm-bootstrap/。
要使用它，在你的页面中包含.js文件，然后运行:
$('your-link-selector').confirmModal();
你可以应用各种各样的选项，让它在确认删除时看起来更好，我使用:
$('your-link-selector').confirmModal({
confirmTitle: 'Please confirm',
confirmMessage: 'Are you sure you want to delete this?',
confirmStyle: 'danger',
confirmOk: '<i class="icon-trash icon-white"></i> Delete',
confirmCallback: function (target) {
//perform the deletion here, or leave this option
//out to just follow link..
}
});
你可以尝试更多可重用的我的解决方案与回调函数。在这个函数中，您可以使用POST请求或一些逻辑。 使用的库:JQuery 3>和Bootstrap 3>。
https://jsfiddle.net/axnikitenko/gazbyv8v/
测试的Html代码:
...
<body>
<a href='#' id="remove-btn-a-id" class="btn btn-default">Test Remove Action</a>
</body>
...
Javascript:
$(function () {
function remove() {
alert('Remove Action Start!');
}
// Example of initializing component data
this.cmpModalRemove = new ModalConfirmationComponent('remove-data', remove,
'remove-btn-a-id', {
txtModalHeader: 'Header Text For Remove', txtModalBody: 'Body For Text Remove',
txtBtnConfirm: 'Confirm', txtBtnCancel: 'Cancel'
});
this.cmpModalRemove.initialize();
});
//----------------------------------------------------------------------------------------------------------------------
// COMPONENT SCRIPT
//----------------------------------------------------------------------------------------------------------------------
/**
* Script processing data for confirmation dialog.
* Used libraries: JQuery 3> and Bootstrap 3>.
*
* @param name unique component name at page scope
* @param callback function which processing confirm click
* @param actionBtnId button for open modal dialog
* @param text localization data, structure:
* > txtModalHeader - text at header of modal dialog
* > txtModalBody - text at body of modal dialog
* > txtBtnConfirm - text at button for confirm action
* > txtBtnCancel - text at button for cancel action
*
* @constructor
* @author Aleksey Nikitenko
*/
function ModalConfirmationComponent(name, callback, actionBtnId, text) {
this.name = name;
this.callback = callback;
// Text data
this.txtModalHeader = text.txtModalHeader;
this.txtModalBody = text.txtModalBody;
this.txtBtnConfirm = text.txtBtnConfirm;
this.txtBtnCancel = text.txtBtnCancel;
// Elements
this.elmActionBtn = $('#' + actionBtnId);
this.elmModalDiv = undefined;
this.elmConfirmBtn = undefined;
}
/**
* Initialize needed data for current component object.
* Generate html code and assign actions for needed UI
* elements.
*/
ModalConfirmationComponent.prototype.initialize = function () {
// Generate modal html and assign with action button
$('body').append(this.getHtmlModal());
this.elmActionBtn.attr('data-toggle', 'modal');
this.elmActionBtn.attr('data-target', '#'+this.getModalDivId());
// Initialize needed elements
this.elmModalDiv = $('#'+this.getModalDivId());
this.elmConfirmBtn = $('#'+this.getConfirmBtnId());
// Assign click function for confirm button
var object = this;
this.elmConfirmBtn.click(function() {
object.elmModalDiv.modal('toggle'); // hide modal
object.callback(); // run callback function
});
};
//----------------------------------------------------------------------------------------------------------------------
// HTML GENERATORS
//----------------------------------------------------------------------------------------------------------------------
/**
* Methods needed for get html code of modal div.
*
* @returns {string} html code
*/
ModalConfirmationComponent.prototype.getHtmlModal = function () {
var result = '<div class="modal fade" id="' + this.getModalDivId() + '"';
result +=' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
result += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
result += this.txtModalHeader + '</div><div class="modal-body">' + this.txtModalBody + '</div>';
result += '<div class="modal-footer">';
result += '<button type="button" class="btn btn-default" data-dismiss="modal">';
result += this.txtBtnCancel + '</button>';
result += '<button id="'+this.getConfirmBtnId()+'" type="button" class="btn btn-danger">';
result += this.txtBtnConfirm + '</button>';
return result+'</div></div></div></div>';
};
//----------------------------------------------------------------------------------------------------------------------
// UTILITY
//----------------------------------------------------------------------------------------------------------------------
/**
* Get id element with name prefix for this component.
*
* @returns {string} element id
*/
ModalConfirmationComponent.prototype.getModalDivId = function () {
return this.name + '-modal-id';
};
/**
* Get id element with name prefix for this component.
*
* @returns {string} element id
*/
ModalConfirmationComponent.prototype.getConfirmBtnId = function () {
return this.name + '-confirm-btn-id';
};
当涉及到一个相关的大项目时，我们可能需要一些可重复使用的东西。这是我在SO的帮助下得到的东西。
confirmDelete.jsp
<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body" style="height: 75px">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm-delete-ok">Ok
</button>
</div>
</div>
</div>
<script type="text/javascript">
var url_for_deletion = "#";
var success_redirect = window.location.href;
$('#confirmDelete').on('show.bs.modal', function (e) {
var message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text(message);
var title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text(title);
if (typeof $(e.relatedTarget).attr('data-url') != 'undefined') {
url_for_deletion = $(e.relatedTarget).attr('data-url');
}
if (typeof $(e.relatedTarget).attr('data-success-url') != 'undefined') {
success_redirect = $(e.relatedTarget).attr('data-success-url');
}
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm-delete-ok').on('click', function () {
$.ajax({
method: "delete",
url: url_for_deletion,
}).success(function (data) {
window.location.href = success_redirect;
}).fail(function (error) {
console.log(error);
});
$('#confirmDelete').modal('hide');
return false;
});
<script/>
reusingPage.jsp
<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>
注意:这使用http删除方法删除请求，你可以改变它从javascript或，可以发送它使用数据属性在数据标题或数据url等，以支持任何请求。
// ---------------------------------------------------------- Generic Confirm
function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {
var confirmModal =
$('<div class="modal hide fade">' +
'<div class="modal-header">' +
'<a class="close" data-dismiss="modal" >×</a>' +
'<h3>' + heading +'</h3>' +
'</div>' +
'<div class="modal-body">' +
'<p>' + question + '</p>' +
'</div>' +
'<div class="modal-footer">' +
'<a href="#" class="btn" data-dismiss="modal">' +
cancelButtonTxt +
'</a>' +
'<a href="#" id="okButton" class="btn btn-primary">' +
okButtonTxt +
'</a>' +
'</div>' +
'</div>');
confirmModal.find('#okButton').click(function(event) {
callback();
confirmModal.modal('hide');
});
confirmModal.modal('show');
};
// ---------------------------------------------------------- Confirm Put To Use
$("i#deleteTransaction").live("click", function(event) {
// get txn id from current table row
var id = $(this).data('id');
var heading = 'Confirm Transaction Delete';
var question = 'Please confirm that you wish to delete transaction ' + id + '.';
var cancelButtonTxt = 'Cancel';
var okButtonTxt = 'Confirm';
var callback = function() {
alert('delete confirmed ' + id);
};
confirm(heading, question, cancelButtonTxt, okButtonTxt, callback);
});
推荐文章
- 改变引导输入焦点蓝色发光
- 如何获得一个键/值JavaScript对象的键
- 什么时候JavaScript是同步的?
- 在jQuery中取消<select>的最佳方法?
- jQuery的“输入”事件
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- 在jQuery中的CSS类更改上触发事件
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- jQuery添加必要的输入字段
- 如何使用Twitter的Bootstrap内联显示列表
- JavaScript错误(Uncaught SyntaxError:意外的输入结束)
- navigator。gelocation。getcurrentposition有时有效有时无效
