使用Bootstrap 3模式框确认删除

问题描述 投票:54回答:8

我需要使用Bootstrap 3模式框确认删除(是/否)。我该如何创建呢?

HTML代码:

<form action="blah" method="POST">
    <button class='btn' type="submit" name="remove_levels" value="delete">
        <span class="fa fa-times"></span> Delete
    </button>
</form>
jquery css twitter-bootstrap-3 bootstrap-modal confirm
8个回答
92
投票

您需要HTML中的模式。单击删除按钮后,它将弹出模态。防止单击该按钮提交表单也很重要。单击确认后,将提交表单。


14
投票

您可以使用Bootbox对话框


9
投票

我今天有同样的问题。这是我的解决方案(我认为它更好,更简单):


6
投票

使用模态的简单方法是使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!-- Modal dialog --> <div id="frmTest" tabindex="-1"> <!-- CUTTED --> <div id="step1" class="modal-footer"> <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button> </div> </div> <!-- Modal confirm --> <div class="modal" id="confirmModal" style="display: none; z-index: 1050;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" id="confirmMessage"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="confirmOk">Ok</button> <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button> </div> </div> </div> </div>


4
投票
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

0
投票

使用id =“ confirmation”在HTML中创建模式对话框,并使用函数showConfirmation。


0
投票

https://jsfiddle.net/yiiBoy/hne9sp6g/以下解决方案比bootbox.js更好,因为]]

  • 它可以完成bootbox.js可以做的一切;


0
投票
<!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>
© www.soinside.com 2019 - 2024. All rights reserved.