如何在Bootstrap模式中显示警报

编程入门行业动态更新时间:2024-10-10 21:31:42

本文介绍了如何在Bootstrap模式中显示警报的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

$（window）.load（function（）{$（'。alertbox'）。click（function（）{alert（'You Clicked Click Here Button'）;}）;} ）

< script src =https：// ajax .googleapis / ajax / libs / jquery / 2.0.0 / jquery.min.js>< / script>< link rel =stylesheethref =maxcdn.bootstrapcdn/bootstrap /3.3.6/css/bootstrap.min.css\">< script src =maxcdn.bootstrapcdn/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 =maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css> < script src =ajax.googleapis/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < script src =maxcdn.bootstrapcdn/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'); }); })

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="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="ajax.googleapis/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2>  <button type="button" class="btn btn-info btn-lg" id="alertbox">Click here</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <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模式中显示警报

本文发布于:2023-11-27 16:11:52，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1638697.html