确认删除模式/对话框使用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

当涉及到一个相关的大项目时，我们可能需要一些可重复使用的东西。这是我在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">&times;</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等，以支持任何请求。

2016-05-18 18:40:30

http://bootboxjs.com/ - Bootstrap 3.0.0的最新作品

最简单的例子:

bootbox.alert("Hello world!");

来自网站:

该库公开了三种用于模拟原生JavaScript等价物的方法。它们确切的方法签名是灵活的，因为每个方法都可以接受各种参数来定制标签和指定默认值，但它们通常是这样被称为:

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)

下面是运行中的代码片段(点击下面的“运行代码片段”):

$(function() { bootbox.alert("Hello world!"); });  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

2012-02-22 15:33:04

这是我的确认框“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

下面的解决方案比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://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

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

推荐文章

最新文章

标签