确认删除模式/对话框使用Twitter引导?

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

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

digimango.messagebox.js:

使用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>

2016-06-30 01:44:28

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

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

digimango.messagebox.js:

使用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>

2016-06-30 01:44:28

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

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>

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

2012-12-26 22:28:12

我发现这个很有用，很容易使用，而且看起来很漂亮: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..
    }
});

2013-11-20 09:56:01

  // ---------------------------------------------------------- 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" >&times;</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);

  });

2012-04-12 13:04:08

这是我的确认框“jquery组件”引导在你的代码中使用这个:

function ConfirmBox({title,message,result}){
 let confirm = $(`
            <div class="modal fade" tabindex="-1" id="confirmBox" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
            <div class="modal-dialog modal-sm">
            <div class="modal-content">
            <div class="modal-header" style="text-align:center">
            <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="modalLabelSmall">${title}</h4>
            </div>

            <div class="modal-body">
            ${message}
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default confirmButton">sure</button>
            </div>
            </div>
            </div>
            </div>
 `);

  //append confirm box to the DOM
  $("body").append(confirm);
  confirm.modal();
 //handlers
        confirm.find("button.confirmButton").one("click",function(){
            result(true);
            confirm.modal("hide");
        });

        confirm.find("button.close").one("click",function(){
            result(false);
            confirm.modal("hide");
        })
        //remove modal after hiding it
        confirm.one('hidden.bs.modal', function () {
            confirm.remove();
        });
}

2021-11-11 06:48:20

确认删除模式/对话框使用Twitter引导?

推荐文章

最新文章

标签