利用jQuery框架设置页面弹出层

其他 2018-05-09 14:19:37 阅读次数: 2

在一些网页中，我们经常需要用到一些弹出层给用户做提示，我们一般的做法都是使用浏览器自带的alert来进行处理，但是对于不同的浏览器解析出来的样式都是不一样的。我们可以先写个小demo查看下各个浏览器的弹出样式：
测试测目录结构
测试代码如下：

使用各个浏览器打开test.html，看看各个浏览器的效果：
火狐下打开
IE下打开
可以看出来每个浏览器解析都是不一样的，这样给用户的体验度不好。所以针对网站，我们可能需要统一的提示框和提示样式。那么怎么做才能以最小的代价完成这样一个功能呢，这里提供了一种根据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

猜你喜欢

转载自my.oschina.net/u/2444569/blog/1511980
今日推荐
周排行
错误：聚合‘std::ifstream inFile’类型不完全，无法被定义
Python中Django中的JS异步调用疑难杂症
使用Bind服务配置DNS服务器
关于调试中的printf的坑
04：一文初探Tensorflow高级API使用（初学者篇）
修改MySQL数据库中主键的值
Codeforces 33B. String Problem（Floyd最短路）
【8】文件的读写
报表导出之easypoi的应用
剑指Offer(Python多种思路实现):用两个栈实现队列
每日归档
更多
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022