我需要使用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>
您需要HTML中的模式。单击删除按钮后,它将弹出模态。防止单击该按钮提交表单也很重要。单击确认后,将提交表单。
您可以使用Bootbox
对话框
我今天有同样的问题。这是我的解决方案(我认为它更好,更简单):
使用模态的简单方法是使用<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>
!
<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>
使用id =“ confirmation”在HTML中创建模式对话框,并使用函数showConfirmation。
https://jsfiddle.net/yiiBoy/hne9sp6g/以下解决方案比bootbox.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>