In some web pages, we often need to use some pop-up layers to remind users. Our general approach is to use the alert that comes with the browser to process, but the styles parsed by different browsers are different. . We can first write a small demo to see the pop-up styles of each browser: the
test code is as follows:
Use each browser to open test.html and see the effect of each browser:
it can be seen that each browser parses differently, which gives a bad user experience. So for the website, we may need a unified prompt box and prompt style. So how can we accomplish such a function with the least cost? Here is a hint based on jQuery :
Step 1: We first make a perfect prompt box, and a pop-up layer code is built into 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> At this time, what we give here is a confirmation box:
for us, the reuse rate of the code is too low, and if the requirements change, we have to change the code of the pop-up layer. It brings a lot of repetitive work to development. Here we can use js to achieve a lot of reuse work:
Step 2: Create JS objects
/**
* 自定义弹出层对象
*/
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);
}
}The third step: hide the pop-up layer, use the message object to control the display
, add the display:none; attribute to the div, hide the 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">Create a message object and call the show() method of the message to display the popup layer
<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>Set popup content
<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>In this way, we can also control the prompt of the message by setting other properties of the message. At this point we can control the popup layer through the message object, but for us, we can do better encapsulation. If we use JS to output our pop-up layer, make the pop-up layer completely out of the page.
http://blog.csdn.net/zhuwei_clark/article/details/52161905