整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹

<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">×

您的操作不可逆

<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-Zd-.]+@[_a-zA-Zd-]+(.[_a-zA-Zd-]+)+$/;
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){
            <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-Zd-.]+@[_a-zA-Zd-]+(.[_a-zA-Zd-]+)+$/;
        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()});//点击确定后 刷新页面</span>
                }


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

　　

　

其他示例：?

Bootstrap Modal >

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    <div class="modal-dialog" role="document"&gt;
        <div class="modal-content"&gt;
            <div class="modal-header"&gt;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                    <span aria-hidden="true"&gt;×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"&gt;温馨提示</h4>
            </div>
            <div class="modal-body"&gt;
                <p>您的操作不可逆</p>
            </div>
            <div class="modal-footer"&gt;
                <button type="button" data-dismiss="modal" class="btn"&gt;Close</button>
                <button type="button" class="btn btn-primary"&gt;Save</button>
            </div>
        </div>
    </div>
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"&gt;</script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;</script>

@*为 .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">

Bootstrap Modal

<div class="panel panel-default"&gt;
    <div class="panel-heading"&gt;好友列表</div>
    <div class="panel-body"&gt;
        <div class="list-group" role="group" aria-label="好友列表"&gt;
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="张三"&gt;
                张三
            </button>
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="李四"&gt;
                李四
            </button>
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="王二"&gt;
                王二
            </button>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&gt;
    <div class="modal-dialog" role="document"&gt;
        <div class="modal-content"&gt;
            <div class="modal-header"&gt;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                    <span aria-hidden="true"&gt;×</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel"&gt;New message</h4>
            </div>
            <div class="modal-body"&gt;
                <form>
                    <div class="form-group"&gt;
                        <label for="recipient-name" class="control-label"&gt;Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name"&gt;
                    </div>
                    <div class="form-group"&gt;
                        <label for="message-text" class="control-label"&gt;Message:</label>
                        <textarea class="form-control" id="message-text"&gt;</textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer"&gt;
                <button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close</button>
                <button type="button" class="btn btn-primary"&gt;Send message</button>
            </div>
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"&gt;</script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;</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>

*@

　　

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!