在一些网页中,我们经常需要用到一些弹出层给用户做提示,我们一般的做法都是使用浏览器自带的alert来进行处理,但是对于不同的浏览器解析出来的样式都是不一样的。我们可以先写个小demo查看下各个浏览器的弹出样式:
测试代码如下:
使用各个浏览器打开test.html,看看各个浏览器的效果:
可以看出来每个浏览器解析都是不一样的,这样给用户的体验度不好。所以针对网站,我们可能需要统一的提示框和提示样式。那么怎么做才能以最小的代价完成这样一个功能呢,这里提供了一种根据jQuery实现的提示:
第一步:我们先做出一个完善的提示框,在jquery里面正好内置了一段弹出层代码。
<html>
<header>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link href="jquery-ui/bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
//alert("弹出测试");
})
</script>
<style>
.clark_ui-dialog-title {
float: left;
color: #404040;
text-overflow: ellipsis;
overflow: hidden;
}
.ui-dialog .clark_ui-dialog-titlebar {
position: relative;
padding: 10px 10px;
border: 0 0 0 1px solid;
border-color: white;
font-size: 15px;
text-decoration: none;
background: none;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
border-bottom: 1px solid #ccc;
}
</style>
</header>
<body>
</body>
<div class="ui-widget-overlay ui-front" id="clark_zhezhao"></div>
<div aria-labelledby="ui-id-2" aria-describedby="dialogconfirm"
role="dialog" tabindex="-1"
style=" height: auto; width: 300px; top: 308.5px; left: 566.5px;"
class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" id="clark_message_main">
<div
class="clark_ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="clark_ui-dialog-title" id="clark_tishi_message">提示</span>
<button title="close" aria-disabled="false" role="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" id="clark_close_meesage">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span
class="ui-button-text" >close</span>
</button>
</div>
<div
style="width: auto; min-height: 39px; max-height: none; height: auto;"
class="ui-dialog-content ui-widget-content" id="clark_dialogconfirm">确定要删除吗?</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button aria-disabled="false" role="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
type="button" id="clark_sure_message_button">
<span class="ui-button-text">确定</span>
</button>
<button aria-disabled="false" role="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
type="button" id="clark_exit_message_button">
<span class="ui-button-text" id="clark_quxiao_message">取消</span>
</button>
</div>
</div>
</div>
</html>
此时这里我们给出的是个确认框:
那对于我们来说,这样写的话,代码的复用率太低,而且如果一旦需求变更,我们都得去改变弹出层的代码。给开发带来了很大的重复工作,这里我们可以利用js来实现大量的复用工作:
第二步:创建JS对象
/**
* 自定义弹出层对象
*/
function Message(){
this.MBID = "clark_zhezhao";//蒙板ID
this.DID ="clark_message_main";//提示框的ID
this.TSID = "clark_tishi_message";//提示信息的ID
this.MAINID = "clark_dialogconfirm"; //内容信息的ID
this.CLOSEID = "clark_close_meesage" ;//关闭按钮的ID
this.SUREID = "clark_sure_message_button" ;//确定按钮的ID
this.EXITID = "clark_exit_message_button" ;//取消按钮的ID
this.tishiMssage = ""; //提示信息
this.showtishiMessage = true; //是否显示提示信息
this.mainMessage = ""; //内容信息
this.showMainMessage = true; //是否显示内容信息
this.showCloseButton = true; //是否显示关闭按钮
this.showSureButton = true; //是否显示确认按钮
this.showSureButtonText = "确定";
this.showExitButton = true; //是否显示退出按钮
this.showExitButtonText = "取消";
this.height = "auto"; //提示框的高度
this.width = "300px"; //提示框的宽度
this.top = "308.5px"; //提示框的位置控件--距离顶部的距离
this.left = "566.5px"; //提示框的位置控件--距离左边距的距离
/**
* 关闭提示框
*/
this.close = function(){
$("#"+this.MBID).hide();
$("#"+this.DID).hide();
}
/**
* 显示
*/
this.show = function(){
$("#"+this.MBID).show();
$("#"+this.DID).show();
//是否显示提示信息
if(this.showtishiMessage){
$("#"+this.TSID).show();
$("#"+this.TSID).html(this.tishiMssage);
}else{
$("#"+this.TSID).hide();
}
//是否显示主要内容
if(this.showMainMessage){
$("#"+this.MAINID).show();
$("#"+this.MAINID).html(this.mainMessage);
}else{
$("#"+this.MAINID).hide();
}
//是否显示关闭按钮
if(!this.showCloseButton){
$("#"+this.CLOSEID).hide();
}else{
$("#"+this.CLOSEID).show();
var MBID = this.MBID;
var DID = this.DID
$("#"+this.CLOSEID).click(function(){
$("#"+MBID).hide();
$("#"+DID).hide();
});
}
//是否显示确认按钮
if(!this.showSureButton){
$("#"+this.SUREID).hide();
}else{
$("#"+this.SUREID).show();
$("#"+this.SUREID).text(this.showSureButtonText);
}
//是否显示退出按钮
if(!this.showExitButton){
$("#"+this.EXITID).hide();
}else{
$("#"+this.EXITID).show();
$("#"+this.EXITID).text(this.showExitButtonText);
var MBID = this.MBID;
var DID = this.DID
$("#"+this.EXITID).click(function(){
$("#"+MBID).hide();
$("#"+DID).hide();
})
}
$("#"+this.DID).css("top",this.top);
$("#"+this.DID).css("height",this.height);
$("#"+this.DID).css("width",this.width);
$("#"+this.DID).css("left",this.left);
}
}
第三步:隐藏弹出层,用message对象来控制显示
给div增加display:none;属性,隐藏div
<div class="ui-widget-overlay ui-front" id="clark_zhezhao" style="display:none;"></div>
<div aria-labelledby="ui-id-2" aria-describedby="dialogconfirm"
role="dialog" tabindex="-1"
style="display: none; height: auto; width: 300px; top: 308.5px; left: 566.5px;"
class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" id="clark_message_main">
创建message对象,调用message的show()方法显示弹出层
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/Message.js"></script>
<link href="jquery-ui/bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
var message = new Message();
message.show();
})
</script>
设置弹出层内容
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/Message.js"></script>
<link href="jquery-ui/bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
var message = new Message();
message.tishiMssage = "删除提示";
message.mainMessage = "确认要删除数据吗?";
message.showSureButton = true;
message.showExitButton = true;
message.show();
})
</script>
这样我们还可以通过设置message的其他属性来控制message的提示。到此我们可以通过message对象来控制弹出层了,但是对我们来说,我们可以进行更好的封装。如用JS输出我们的弹出层,使弹出层完全脱离出页面。
http://blog.csdn.net/zhuwei_clark/article/details/52161905