频道导航

整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

2019-02-03 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我的代码示例：

Highlighter">

　整段代码：

Highlighter">



<Meta charset="utf-8">
{{$title}}


<Meta name="viewport" content="width=device-width,initial-scale=1.0">
logo.jpg" rel="shortcut icon">









Box">
      
      
Box">
        PHP" method="post" name="searchform">

<span style="color: #ff0000">
<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">×

    $("#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){
            <span style="color: #ff0000"&gt;$("#myModal").modal();
            $(".modal-body p").html("非法数据ID");</span>
        }
        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)){
            <span style="color: #ff0000"&gt;$("#myModal").modal();
            $(".modal-body p").html("请完善信息！");</span>
        }else{
            $.post("joinus",{'username':username,'tel':tel,'company':company,'job':job,'email':email},function(data){
                if(data.code=='200'){
                    <span style="color: #ff0000"&gt;$("#myModal").modal();
                    $(".modal-body p").html(data.msg);
                    $("#quedingbtn").click(function(){location.reload()})</span>
                }
                if(data.code=='201'){
                    <span style="color: #ff0000"&gt;$("#myModal").modal();
                    $(".modal-body p").html(data.msg);
                    $("#quedingbtn").click(function(){location.reload()})</span>
                }
                if(data.code=='300'){
                    <span style="color: #ff0000"&gt;$("#myModal").modal();
                    $(".modal-body p").html(data.msg);
                    $("#quedingbtn").click(function(){location.reload()});//点击确定后 刷新<a href="/tag/yemian/" target="_blank" class="keywords">页面</a></span>
                }


            },'json')
        }
        //$("form").submit();
    })
});

其他示例：

Highlighter">


    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    Bootstrap Modal
    Box-shadow: 0 5px 15px rgba(0,0.5);
    Box-shadow: 0 5px 15px rgba(0,0.5);
    }
    }
    >