小残曦

love曦

小残曦

jquery重写confirm.

忙忙碌碌中度日,许久不更新了,工作是一方面,偷懒是一方面。今天碰到一个问题,因为项目需要,要重新修改公共样式,所以,我需要负责的是微信端弹出样式的修改。对于浏览器来说confirm是在确认后去触发的,所以在对其修改的时候也要考虑到后续行为,通常在这里做处理的时候是比较难做的,因为confirm在弹出后会对js进行暂停操作,点击确认之后才会去触发后面的操作。
通常,我们的用法是这样的,if(confirm(‘确认要操作吗?’)){…这里就是确认之后要做的事}
因为confirm显示的比较难看,所以就重新写了模拟框出来,首先是html部分。

<!-- 弹出层,置灰 -->
	<div id="mask"></div>
	<!-- 确认信息弹出层 -->
    <div id="confirmDiv" class="box01">
  		<div class="font01" id="confirmMsg"></div>
  		<div class="butbox">
  			<a href="javascript:;">
    			<div class="but02 ok" id="btnok">确定</div>
    		</a>
    		<a href="javascript:;">
    			<div class="but03 cancel">取消</div>
    		</a>
  		</div>
	</div>

css样式部分

#mask {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #555;
	opacity: 0.2;
	z-index: 9999998;
}
.box01 {
	display: none;
	width: 70%;
	height: 160px;
	position: fixed;
	left: 15%;
	top: 50%;
	margin-top: -80px;
	background-color: #FFF;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 20px #999;
	-moz-box-shadow: 0 0 20px #999;
	-webkit-box-shadow: 0 0 20px #999;
	z-index: 9999999;
}
.font01 {
	margin: 16px 4%;
	font-size: 14px;
	color: #808080;
	line-height: 26px;
	letter-spacing: 1px;
	font-family: "微软雅黑";
	text-align: center;
}
.butbox {
	width: 92%;
	margin-left: 4%;
	margin-right: 4%;
	border-top: 1px #e5e5e5 solid;
	padding-top: 16px;
}
.but01 {
	width: 90%;
	height: 40px;
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #0ab;
	color: #FFF;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	float: left;
	font-family: "微软雅黑";
}
.but01:hover {
	background-color: #0096aa;
}
.but02 {
	width: 40%;
	height: 40px;
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #0ab;
	color: #FFF;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	float: left;
}
.but02:hover {
	background-color: #0096aa;
}
.but03 {
	width: 40%;
	height: 40px;
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #0ab;
	color: #666;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	float: left;
}
.but03:hover {
	border: 1px solid #85dadf;
}

js部分

// 显示确认信息提示框
$(function(){
    window.showConfirm = showConfirm;
    //关键代码
    function showConfirm(msg){
      var cancel_callback = function(){};
      var ok_callback = function(){};
      var result = {
          cancel:function(callback){cancel_callback=callback;return result;},
          ok:function(callback){ok_callback=callback;return result;}
      }
      $("#confirmDiv").find('#confirmMsg').text(msg);
      $("#confirmDiv").find('.cancel').off().on("click", function(){
    	  $("#confirmDiv").css("display","none");
          cancel_callback();
      });
      $("#confirmDiv").find('.ok').off().on("click", function(){
    	  $("#confirmDiv").css("display","none");
          ok_callback();
      });
      setTimeout(function(){
    	  $("#confirmDiv").css("display","block");
    	  $("#mask").css("display","block");
      },0);
      return result;
    }
    
});

// 关闭确认提示框
function closeConfirmDiv(){
	$("#confirmDiv").css("display","none");
	$("#mask").css("display","none");
}

js调用部分

showConfirm('确认吗').ok(function(){
            alert('确认');
        }).cancel(function(){
            alert('取消');
    });

 

评论回复

  1. 回复 野兔

    野兔说:zzsb

  2. 回复 野兔

    野兔说:Yetu is here ~

3 + 2 =

回到顶部