利用jQuery框架設置頁面彈出層

時間 2019-11-11

原文原文鏈接

在一些網頁中，咱們常常須要用到一些彈出層給用戶作提示，咱們通常的作法都是使用瀏覽器自帶的alert來進行處理，可是對於不一樣的瀏覽器解析出來的樣式都是不同的。咱們能夠先寫個小demo查看下各個瀏覽器的彈出樣式：

測試代碼以下：javascript

使用各個瀏覽器打開test.html，看看各個瀏覽器的效果：

能夠看出來每一個瀏覽器解析都是不同的，這樣給用戶的體驗度很差。因此針對網站，咱們可能須要統一的提示框和提示樣式。那麼怎麼作才能以最小的代價完成這樣一個功能呢，這裏提供了一種根據jQuery實現的提示：
第一步：咱們先作出一個完善的提示框，在jquery裏面正好內置了一段彈出層代碼。css

<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對象html

/**
 * 自定義彈出層對象
 */
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;屬性，隱藏divjava

<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()方法顯示彈出層jquery

<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>

設置彈出層內容web

<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輸出咱們的彈出層，使彈出層徹底脫離出頁面。bootstrap

http://blog.csdn.net/zhuwei_clark/article/details/52161905瀏覽器