自制对话框
在做有关商品的项目中肯定离不开订单。最近的一个项目中客户说代理从公司订货的订单可能不会全部发货，公司可自己决定要发多少货，不得不说Ta们很有头脑。所以在发货的时候要有“快递类型、快递单号、实发货量”的信息。最low的方法当然是使用js的prompt对话框把这些信息一个一个得到，这样用户体验很不好，所以就自己做了一个对话窗，还做了遮罩，先来看一下效果图吧：
是不是觉得有点丑，如果你css功底很好的话就自己调样式吧，不好的话就老老实实的用Bootsrap的样式呗。js代码略有改动，可删掉写自己的
代码：
<html>
<head>
<meta charset="utf-8">
<title>对话框</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<button onclick="f_h()">显示对话框</button>
<div id="shadow" style="position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(6, 6, 6, 0.29);z-index:99;display:none" onclick="hide_msg(this)"></div>
<div style="width:280px;height:230px;border:1px solid rgb(186, 184, 184);position:absolute;position: fixed;z-index: 100;background-color: rgb(232, 231, 231);top: 30%;left: 40%;padding: 35px;display:none" id="fh-msg"><!-- display:none -->
<label>快递类型：</label>
<input name="shipName" /></br></br></br></br>
<label>快递单号：</label>
<input name="shipCode" /></br></br></br></br>
<label>实发货量：</label>
<input name="shipNum" onkeyup="keyup(this)" onpaste="keyup(this)" style="" /></br></br></br>
<button class="btn btn-theme03" onclick="sh_fh_two({$data.id})">确定</button> <span id="err" style="color:red;"></span>
</div>
<script type="text/javascript">
//请求状态，用于控制页面刷新，1：未请求；2：正在请求；3：已请求
var status=1;
//订货数量
var num=0;
//订单id
var orderId=0;
function hide_msg(obj){
if(status==3){
window.location.reload();
return;
}
$("#fh-msg").hide();
$(obj).hide();
$("#fh-msg").children('input').val('');
}
//控制键盘输入、粘贴内容时只能输入数字，把非数字字符用正则去除
function keyup(obj){
var val=obj.value.replace(/[^\d.]/g,'');
if(val==''){
obj.value='';
return;
}
val=parseInt(val)
if(val>num){
obj.value=num;
}else{
obj.value=val;
}
}
//发货
function f_h(id,obj){
orderId=id;
//存放订货数量的元素
num=$($(obj).parent()[0]).prev();
//获得订货数量
num=parseInt($(num).html());
$('#shadow').show();
$('#fh-msg').fadeIn();
}
function sh_fh_two(){
if(status==2){
return;
}
var shipName=$.trim($('input[name=shipName]').val());
if(shipName.length==0){
$("#err").text('请输入快递名称');
return;
}
var shipCode=$.trim($('input[name=shipCode]').val());
if(shipCode.length==0){
$("#err").text('请输入快递单号');
return;
}
var fa_num=$.trim($('input[name=shipNum]').val());
if(fa_num.length==0){
$("#err").text('请输入发货数量');
return;
}
status=2;
$.post("{:U('Order/quhuoFh')}",'id='+orderId+'&code='+shipCode+'&name='+shipName+'&num='+fa_num,function(data){
status=3;
//处理返回结果
})
}
</script>
</body>
</html>
小小讲解一下：
遮罩的实现：<div id="shadow" style="position:fixed;width:100%;height:100%;top:0;left:0;z-index:99;display:none" onclick="hide_msg(this)"></div>，就是在浏览器视口中的位置固定，然后跟浏览器视口同宽高，层级在对话框之下。
浙公网安备 33010602011771号