我有一个HTML表的行绑定到数据库行。我希望每行都有一个“删除行”链接,但我想事先与用户确认。

有没有办法使用Twitter引导模式对话框来做到这一点?


当前回答

我可以很容易地使用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..
    }
});

我意识到这是一个非常古老的问题,但自从我今天想知道一个更有效的方法来处理引导情态动词。我做了一些研究,发现了一些比上面显示的解决方案更好的方法,可以在这个链接中找到:

http://www.petefreitag.com/item/809.cfm

首先加载jquery

$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

然后向href询问任何问题/确认即可:

<a href="/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>

通过这种方式,确认模式更加通用,因此可以很容易地在网站的其他部分重复使用。

你可以尝试更多可重用的我的解决方案与回调函数。在这个函数中,您可以使用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 网站

下面的解决方案比bootbox.js更好,因为

它可以做bootbox.js能做的所有事情; 使用语法更简单 它允许你优雅地控制你的信息的颜色使用“错误”,“警告”或“信息” Bootbox有986行长,我的只有110行长

digimango.messagebox.js:

const dialogTemplate = '\ <div class ="modal" id="digimango_messageBox" role="dialog">\ <div class ="modal-dialog">\ <div class ="modal-content">\ <div class ="modal-body">\ <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\ <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\ </div>\ <div class ="modal-footer">\ <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\ <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\ </div>\ </div>\ </div>\ </div>'; // See the comment inside function digimango_onOkClick(event) { var digimango_numOfDialogsOpened = 0; function messageBox(msg, significance, options, actionConfirmedCallback) { if ($('#digimango_MessageBoxContainer').length == 0) { var iDiv = document.createElement('div'); iDiv.id = 'digimango_MessageBoxContainer'; document.getElementsByTagName('body')[0].appendChild(iDiv); $("#digimango_MessageBoxContainer").html(dialogTemplate); } var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText; if (options == null) { okButtonName = 'OK'; cancelButtonName = null; showTextBox = null; textBoxDefaultText = null; } else { okButtonName = options.okButtonName; cancelButtonName = options.cancelButtonName; showTextBox = options.showTextBox; textBoxDefaultText = options.textBoxDefaultText; } if (showTextBox == true) { if (textBoxDefaultText == null) $('#digimango_messageBoxTextArea').val(''); else $('#digimango_messageBoxTextArea').val(textBoxDefaultText); $('#digimango_messageBoxTextArea').show(); } else $('#digimango_messageBoxTextArea').hide(); if (okButtonName != null) $('#digimango_messageBoxOkButton').html(okButtonName); else $('#digimango_messageBoxOkButton').html('OK'); if (cancelButtonName == null) $('#digimango_messageBoxCancelButton').hide(); else { $('#digimango_messageBoxCancelButton').show(); $('#digimango_messageBoxCancelButton').html(cancelButtonName); } $('#digimango_messageBoxOkButton').unbind('click'); $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick); $('#digimango_messageBoxCancelButton').unbind('click'); $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick); var content = $("#digimango_messageBoxMessage"); if (significance == 'error') content.attr('class', 'text-danger'); else if (significance == 'warning') content.attr('class', 'text-warning'); else content.attr('class', 'text-success'); content.html(msg); if (digimango_numOfDialogsOpened == 0) $("#digimango_messageBox").modal(); digimango_numOfDialogsOpened++; } function digimango_onOkClick(event) { // JavaScript's nature is unblocking. So the function call in the following line will not block, // thus the last line of this function, which is to hide the dialog, is executed before user // clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count // how many dialogs is currently showing. If we know there is still a dialog being shown, we do // not execute the last line in this function. if (typeof (event.data.callback) != 'undefined') event.data.callback($('#digimango_messageBoxTextArea').val()); digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } function digimango_onCancelClick() { digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); }

使用digimango.messagebox.js:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A useful generic message box</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" /> <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/bootstrap.js" type="text/javascript"></script> <script src="~/Scripts/bootbox.js" type="text/javascript"></script> <script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script> <script type="text/javascript"> function testAlert() { messageBox('Something went wrong!', 'error'); } function testAlertWithCallback() { messageBox('Something went wrong!', 'error', null, function () { messageBox('OK clicked.'); }); } function testConfirm() { messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () { messageBox('Are you sure you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }); }); } function testPrompt() { messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (userInput) { messageBox('User entered "' + userInput + '".'); }); } function testPromptWithDefault() { messageBox('How do you feel now?', 'normal', { showTextBox: true, textBoxDefaultText: 'I am good!' }, function (userInput) { messageBox('User entered "' + userInput + '".'); }); } </script> </head> <body> <a href="#" onclick="testAlert();">Test alert</a> <br/> <a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br /> <a href="#" onclick="testConfirm();">Test confirm</a> <br/> <a href="#" onclick="testPrompt();">Test prompt</a><br /> <a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br /> </body> </html>