如何在Bootstrap模式中显示警报 [英] How to display an Alert in Bootstrap Modal
本文介绍了如何在Bootstrap模式中显示警报的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$（window）.load（function（）{$（'。alertbox'）。click（function（）{alert（'You Clicked Click Here Button'）;}）;} ）
< script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.0.0 / jquery.min.js>< / script>< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap /3.3.6/css/bootstrap.min.css\">< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js> < /脚本> < DIV> < a class =alertboxhref =＃clicked>点击此处< / a>< / div>
警报显示在引导模式中。
解决方案
在模态主体中创建错误div。并设置错误
<！DOCTYPE html>< html lang =en>< head> ; < title>引导程序示例< / title> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< / head>< body>< div class = 容器 > < h2>模式示例< / h2> <！ - 用按钮触发模式 - > < button type =buttonclass =btn btn-info btn-lgid =alertbox>点击此处< / button> <！ - 模态 - > < div class =modal fadeid =myModalrole =dialog> < div class =modal-dialog> <！ - 模态内容 - > < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>模态标头< / h4> < / DIV> < div class =modal-body> < p id =error>< / p> < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< /按钮> < / DIV> < / DIV> < / DIV> < / DIV> < / div>< / body>< / html>
$(window).load(function(){
$('.alertbox').click(function(){
alert('You Clicked on Click Here Button');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<div>
<a class="alertbox" href="#clicked"> Click Here</a>
</div>
I want the alert to be displayed in the bootstrap Modal.
解决方案
Create the error div in modal body. and set error
$(document).ready(function(){
$('#alertbox').click(function(){
$("#error").html("You Clicked on Click here Button");
$('#myModal').modal("show");
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="alertbox">Click here</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p id="error"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这篇关于如何在Bootstrap模式中显示警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
