欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好

程序员文章站 2022-03-12 08:21:49
效果图: 我的代码示例: 整段代码: 其他示例: ......

效果图:

整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好

我的代码示例:




<!--提示模态框--> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="mymodallabel">温馨提示</h4> </div> <div class="modal-body"> <p>您的操作不可逆</p> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn sr-only">取消</button> <button type="button" data-dismiss="modal" id="quedingbtn" class="btn btn-primary">确定</button> </div> </div> </div> </div>

 整段代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{$title}}</title>
<meta name="keywords" content="{{$keywords}}" />
<meta name="description" content="{{$description}}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="image/x-icon" href="/static/images/logo.jpg" rel="shortcut icon">
<link href="/static/bootstrap/css/bootstraphome.min.css" rel="stylesheet">
<link href="/static/home/bootstrapvalidator/dist/css/bootstrapvalidator.css" rel="stylesheet">
<link href="/static/home/css/base.css" rel="stylesheet">
<link href="/static/home/css/index.css" rel="stylesheet">
<link href="/static/home/css/m.css" rel="stylesheet">
<script src="/static/home/js/jquery.min.js" ></script>
<script src="/static/bootstrap/js/bootstrap.min.js" ></script>
<script src="/static/home/bootstrapvalidator/dist/js/bootstrapvalidator.js" ></script>
<script src="/static/home/js/hc-sticky.js"></script>
<script src="/static/home/js/comm.js"></script>

<style>
/*去掉type为number时 input后面加减号问题*/ input[type='number']{-moz-appearance:textfield;} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;} @media screen and (min-width: 768px) { .modal-dialog { right: auto; left: 0%; width: 300px; padding-top: 30px; padding-bottom: 30px; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } } @media only screen and (max-width: 479px){ .modal{ position: fixed; top: 200px; right: 0; bottom: 0; left: 0; z-index: 10500; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .modal-dialog { right: auto; left: 0%; width: 300px; margin:0 auto; padding-top: 30px; padding-bottom: 30px; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } } </style> <!--[if lt ie 9]> <script src="js/modernizr.js"></script> <![endif]--> </head> <body> <header id="header"> <div class="navbar"> <div class="topbox"> <p class="welcome">由上海交通大学教育集团整合海内外顶尖的证券投资领域专家资源,推出权威、特色、实用的《私募基金经理高级研修班</p> <div class="searchbox"> <div id="search_bar" class="search_bar"> <form id="searchform" action="[!--news.url--]e/search/index.php" method="post" name="searchform"> <input class="input" placeholder="想搜点什么呢.." type="text" name="keyboard" id="keyboard"> <input type="hidden" name="show" value="title" /> <input type="hidden" name="tempid" value="1" /> <input type="hidden" name="tbname" value="news"> <input type="hidden" name="submit" value="搜索" /> <p class="search_ico"> <span></span></p> </form> </div> </div> </div> </div> <include file="public:navigation" /> </header> <div class="wrapper"> <main> <h2 class="place">您现在的位置是:网站首页> <a href="/">{{$data.a_title}}</a></h2> <div class="infosbox"> <div class="newsview"> <h3 class="news_title">报名信息填写</h3> <form name="dataform" enctype="multipart/form-data" class="form-horizontal top15" action="{{:url('index/joinus')}}"> <div class="input-group"> <label class="input-group-addon" id="inputgroupsuccess3">姓名<span style="color:red;">*</span></label> <input type="text" class="form-control" id="username" aria-describedby="inputgroupsuccess3status" name="username" required placeholder="name"> <span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok0" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove0" aria-hidden="true"></span> </div> <span id="inputgroupsuccess3status0" class="sr-only" style="color:red;">(审核通过)</span> <br><br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">手机号<span style="color:red;">*</span></span> <input type="number" class="form-control" id="tel" name="tel" required placeholder="tel" aria-describedby="basic-addon1" maxlength="2" oninput="if(value.length>11)value=value.slice(0,11)"> <span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok1" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove1" aria-hidden="true"></span> </div> <span id="inputgroupsuccess3status1" class="sr-only" style="color:red;">(审核通过)</span> <br><br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">公司/单位<span style="color:red;">*</span></span> <input type="text" class="form-control" id="company" name="company" required placeholder="company" aria-describedby="basic-addon1"> <span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok2" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove2" aria-hidden="true"></span> </div> <span id="inputgroupsuccess3status2" class="sr-only" style="color:red;">(审核通过)</span> <br><br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">职位<span style="color:red;">*</span></span> <input type="text" class="form-control" id="job" name="job" required placeholder="job" aria-describedby="basic-addon1"> <span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok3" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove3" aria-hidden="true"></span> </div> <span id="inputgroupsuccess3status3" class="sr-only" style="color:red;">(审核通过)</span> <br><br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">邮箱<span style="color:red;">*</span></span> <input type="text" class="form-control" id="email" name="email" required placeholder="email" aria-describedby="basic-addon1"> <span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok4" aria-hidden="true"></span> <span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove4" aria-hidden="true"></span> </div> <span id="inputgroupsuccess3status4" class="sr-only" style="color:red;">(审核通过)</span> <div class="input-group" style="margin:50px auto 100px;"> <!--<a class="btn btn-primary btn-lg btn-save">提 交</a>--> <input type="hidden" id="aid" name="aid" value="{{$data.a_id}}" /> <button type="button" class="btn btn-primary btn-lg" id="validatebtn" style="outline:none;">提 交</button> </div> </form> </div> </div> </main> <aside class="sidebar"> <!--分类--> <!--<include file="public:fenlei" />--> <!--关于我--> <include file="public:aboutme" /> <!--推荐栏目--> <include file="public:tjlm" /> <!--图片精选--> <include file="public:tpjx" /> </aside> <!--sidebar end--> </div> <!--wrapper end--> <include file="public:footer" /> <a href="#" class="cd-top">top</a> <!--提示模态框--> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="mymodallabel">温馨提示</h4> </div> <div class="modal-body"> <p>您的操作不可逆</p> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn sr-only">取消</button> <button type="button" data-dismiss="modal" id="quedingbtn" class="btn btn-primary">确定</button> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ //姓名验证 $("#username").keyup(function(){ var username = $("#username").val(); if(!username){ $("#inputgroupsuccess3status0").removeclass("sr-only"); $("#inputgroupsuccess3status0").html("姓名不能为空!"); $(".glyphicon-remove#remove0").removeclass("sr-only"); $(".glyphicon-ok#ok0").addclass("sr-only"); }else{ $("#inputgroupsuccess3status0").removeclass("sr-only"); $("#inputgroupsuccess3status0").html("审核通过!"); $(".glyphicon-remove#remove0").addclass("sr-only"); $(".glyphicon-ok#ok0").removeclass("sr-only"); } }) //手机号验证 $("#tel").keyup(function(){ var tel = $("#tel").val(); var reg = /^0?(13[0-9]|17[0-9]|15[0123456789]|18[0123456789]|14[57])[0-9]{8}$/; if(!tel || !reg.test(tel)){ $("#inputgroupsuccess3status1").removeclass("sr-only"); $("#inputgroupsuccess3status1").html("手机号格式不正确!"); $(".glyphicon-remove#remove1").removeclass("sr-only"); $(".glyphicon-ok#ok1").addclass("sr-only"); }else{ $("#inputgroupsuccess3status1").removeclass("sr-only"); $("#inputgroupsuccess3status1").html("审核通过!"); $(".glyphicon-remove#remove1").addclass("sr-only"); $(".glyphicon-ok#ok1").removeclass("sr-only"); } }) //公司/单位验证 $("#company").keyup(function(){ var company = $("#company").val(); if(!company){ $("#inputgroupsuccess3status2").removeclass("sr-only"); $("#inputgroupsuccess3status2").html("公司/单位不能为空!"); $(".glyphicon-remove#remove2").removeclass("sr-only"); $(".glyphicon-ok#ok2").addclass("sr-only"); }else{ $("#inputgroupsuccess3status2").removeclass("sr-only"); $("#inputgroupsuccess3status2").html("审核通过!"); $(".glyphicon-remove#remove2").addclass("sr-only"); $(".glyphicon-ok#ok2").removeclass("sr-only"); } }) //职位验证 $("#job").keyup(function(){ var job = $("#job").val(); if(!job){ $("#inputgroupsuccess3status3").removeclass("sr-only"); $("#inputgroupsuccess3status3").html("职位不能为空!"); $(".glyphicon-remove#remove3").removeclass("sr-only"); $(".glyphicon-ok#ok3").addclass("sr-only"); }else{ $("#inputgroupsuccess3status3").removeclass("sr-only"); $("#inputgroupsuccess3status3").html("审核通过!"); $(".glyphicon-remove#remove3").addclass("sr-only"); $(".glyphicon-ok#ok3").removeclass("sr-only"); } }) //邮箱验证 $("#email").keyup(function(){ var email = $("#email").val(); var reg2 = /[_a-za-z\d\-\.]+@[_a-za-z\d\-]+(\.[_a-za-z\d\-]+)+$/; if(!email || !reg2.test(email)){ $("#inputgroupsuccess3status4").removeclass("sr-only"); $("#inputgroupsuccess3status4").html("邮箱格式不正确!"); $(".glyphicon-remove#remove4").removeclass("sr-only"); $(".glyphicon-ok#ok4").addclass("sr-only"); }else{ $("#inputgroupsuccess3status4").removeclass("sr-only"); $("#inputgroupsuccess3status4").html("审核通过!"); $(".glyphicon-remove#remove4").addclass("sr-only"); $(".glyphicon-ok#ok4").removeclass("sr-only"); } }) $("#validatebtn").click(function(){ var username = $("#username").val(); var tel = $("#tel").val(); var company = $("#company").val(); var job = $("#job").val(); var email = $("#email").val(); var aid = $("#aid").val(); if(!aid || aid==null || aid==false){ $("#mymodal").modal(); $(".modal-body p").html("非法数据id"); } if(!username){ $("#inputgroupsuccess3status0").removeclass("sr-only"); $("#inputgroupsuccess3status0").html("姓名不能为空!"); $(".glyphicon-remove").removeclass("sr-only"); }else{ $("#inputgroupsuccess3status0").removeclass("sr-only"); $("#inputgroupsuccess3status0").html("审核通过!"); $(".glyphicon-ok").removeclass("sr-only"); } var reg = /^0?(13[0-9]|17[0-9]|15[0123456789]|18[0123456789]|14[57])[0-9]{8}$/; if(!tel || !reg.test(tel)){ $("#inputgroupsuccess3status1").removeclass("sr-only"); $("#inputgroupsuccess3status1").html("手机号格式不正确!"); $(".glyphicon-remove#remove1").removeclass("sr-only"); $(".glyphicon-ok#ok1").addclass("sr-only"); }else{ $("#inputgroupsuccess3status1").removeclass("sr-only"); $("#inputgroupsuccess3status1").html("审核通过!"); $(".glyphicon-remove#remove1").addclass("sr-only"); $(".glyphicon-ok#ok1").removeclass("sr-only"); } if(!company){ $("#inputgroupsuccess3status2").removeclass("sr-only"); $("#inputgroupsuccess3status2").html("公司/单位不能为空!"); $(".glyphicon-remove#remove2").removeclass("sr-only"); $(".glyphicon-ok#ok2").addclass("sr-only"); }else{ $("#inputgroupsuccess3status2").removeclass("sr-only"); $("#inputgroupsuccess3status2").html("审核通过!"); $(".glyphicon-remove#remove2").addclass("sr-only"); $(".glyphicon-ok#ok2").removeclass("sr-only"); } if(!job){ $("#inputgroupsuccess3status3").removeclass("sr-only"); $("#inputgroupsuccess3status3").html("职位不能为空!"); $(".glyphicon-remove#remove3").removeclass("sr-only"); $(".glyphicon-ok#ok3").addclass("sr-only"); }else{ $("#inputgroupsuccess3status3").removeclass("sr-only"); $("#inputgroupsuccess3status3").html("审核通过!"); $(".glyphicon-remove#remove3").addclass("sr-only"); $(".glyphicon-ok#ok3").removeclass("sr-only"); } var reg2 = /[_a-za-z\d\-\.]+@[_a-za-z\d\-]+(\.[_a-za-z\d\-]+)+$/; if(!email || !reg2.test(email)){ $("#inputgroupsuccess3status4").removeclass("sr-only"); $("#inputgroupsuccess3status4").html("邮箱格式不正确!"); $(".glyphicon-remove#remove4").removeclass("sr-only"); $(".glyphicon-ok#ok4").addclass("sr-only"); }else{ $("#inputgroupsuccess3status4").removeclass("sr-only"); $("#inputgroupsuccess3status4").html("审核通过!"); $(".glyphicon-remove#remove4").addclass("sr-only"); $(".glyphicon-ok#ok4").removeclass("sr-only"); } if(!username || !tel || !reg.test(tel) || !company || !job || !email || !reg2.test(email)){ $("#mymodal").modal(); $(".modal-body p").html("请完善信息!"); }else{ $.post("joinus",{'username':username,'tel':tel,'company':company,'job':job,'email':email},function(data){ if(data.code=='200'){ $("#mymodal").modal(); $(".modal-body p").html(data.msg); $("#quedingbtn").click(function(){location.reload()}) } if(data.code=='201'){ $("#mymodal").modal(); $(".modal-body p").html(data.msg); $("#quedingbtn").click(function(){location.reload()}) } if(data.code=='300'){ $("#mymodal").modal(); $(".modal-body p").html(data.msg); $("#quedingbtn").click(function(){location.reload()});//点击确定后 刷新页面 } },'json') } //$("form").submit(); }) }); </script> </body> </html>

  

 

 

 

 

其他示例: 

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
    @@media screen and (min-width: 768px) {
    .modal-dialog {
    right: auto;
    left: 0%;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
    }
    .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    }
    </style>></head>
<body>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">
        launch demo modal
    </button>
 
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="mymodallabel">温馨提示</h4>
                </div>
                <div class="modal-body">
                    <p>您的操作不可逆</p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn">close</button>
                    <button type="button" class="btn btn-primary">save</button>
                </div>
            </div>
        </div>
    </div>
 
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
@*为 .modal 添加 role="dialog",用于指定模态框为对话框。
为 .modal-dialog 添加 aria-hidden="true" 属性。
通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
关闭动画
如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。
 
通过按钮属性显示不同内容
当有一堆按钮,都要触发相同的模态框(如:向好友列表中某个人发消息),只是有用户id不同,那么可以使用data-whatever配合event.relatedtarget来实现:
[html] view plain copy
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
 
 
    <div class="panel panel-default">
        <div class="panel-heading">好友列表</div>
        <div class="panel-body">
            <div class="list-group" role="group" aria-label="好友列表">
                <button type="button" class="list-group-item" data-toggle="modal" data-target="#examplemodal"
                        data-whatever="张三">
                    张三
                </button>
                <button type="button" class="list-group-item" data-toggle="modal" data-target="#examplemodal"
                        data-whatever="李四">
                    李四
                </button>
                <button type="button" class="list-group-item" data-toggle="modal" data-target="#examplemodal"
                        data-whatever="王二">
                    王二
                </button>
            </div>
        </div>
    </div>
 
    <div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="examplemodallabel">new message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">recipient:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                    <button type="button" class="btn btn-primary">send message</button>
                </div>
            </div>
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $('#examplemodal').on('show.bs.modal', function (event) {
            var button = $(event.relatedtarget) // 触发事件的按钮
            var recipient = button.data('whatever') // 解析出data-whatever内容
            var modal = $(this)
            modal.find('.modal-title').text('message to ' + recipient)
            modal.find('.modal-body input').val(recipient)
        })
    </script>
</body>
</html>*@