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

效果图:

整理:手机端弹出提示框,使用的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>*@

  

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

上一篇:moment.js 日期和时间管理 24小时制


下一篇:基于MVC架构登录案例分析研究