jQuery實現自定義樣式的彈出視窗和確認框

阿新 • • 發佈：2019-01-16

IT��

(function () {
    $.MsgBox = {
        Alert: function (title, msg) {
            GenerateHtml("alert", title, msg);
            btnOk();  //alert只是彈出訊息，因此沒必要用到回撥函式callback
            btnNo();
        },
        Confirm: function (title, msg, callback) {
            GenerateHtml("confirm", title, msg);
            btnOk(callback);
            btnNo();
        }
    }
    //生成Html
    var GenerateHtml = function (type, title, msg) {
        var _html = "";
        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
        _html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
        if (type == "alert") {
            _html += '<input id="mb_btn_ok" type="button" value="確定" />';
        }
        if (type == "confirm") {
            _html += '<input id="mb_btn_ok" type="button" value="確定" />';
            _html += '<input id="mb_btn_no" type="button" value="取消" />';
        }
        _html += '</div></div>';
        //必須先將_html新增到body，再設定Css樣式
        $("body").append(_html); 
        //生成Css
         GenerateCss();
    }

    //生成Css
    var GenerateCss = function () {
        $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
            filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'
        });
        $("#mb_con").css({ zIndex: '999999', width: '400px', position: 'fixed',
            backgroundColor: 'White', borderRadius: '15px'
        });
        $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',
            backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',
            borderBottom: '3px solid #009BFE', fontWeight: 'bold'
        });
        $("#mb_msg").css({ padding: '20px', lineHeight: '20px',
            borderBottom: '1px dashed #DDD', fontSize: '13px'
        });
        $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
            border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
            lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微軟雅黑'
        });
        $("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });
        $("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });
        $("#mb_btn_ok").css({ backgroundColor: '#168bbb' });
        $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });
        //右上角關閉按鈕hover樣式
        $("#mb_ico").hover(function () {
            $(this).css({ backgroundColor: 'Red', color: 'White' });
        }, function () {
            $(this).css({ backgroundColor: '#DDD', color: 'black' });
        });
        var _widht = document.documentElement.clientWidth;  //螢幕寬
        var _height = document.documentElement.clientHeight; //螢幕高
        var boxWidth = $("#mb_con").width();
        var boxHeight = $("#mb_con").height();
        //讓提示框居中
        $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
    }
    //確定按鈕事件
    var btnOk = function (callback) {
        $("#mb_btn_ok").click(function () {
            $("#mb_box,#mb_con").remove();
            if (typeof (callback) == 'function') {
                callback();
            }
        });
    }
    //取消按鈕事件
    var btnNo = function () {
        $("#mb_btn_no,#mb_ico").click(function () {
            $("#mb_box,#mb_con").remove();
        });
    }
})();

Html程式碼結構如下，js裡面拼接的不直觀，給出如下：

<div id="mb_box"></div>
<div id="mb_con">
        <span id="mb_tit">title</span><a id="mb_ico">x</a>
        <div id="mb_msg">msg</div>
        <div id="mb_btnbox">
            <input id="mb_btn_ok" type="button" value="確定" />
            <input id="mb_btn_no" type="button" value="取消" />
        </div>
</div>

demo：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模擬alert和confirm提示框</title>
</head>
<body>
    <input id="add" type="button" value="新增" />
    <input id="delete" type="button" value="刪除" />
    <input id="update" type="button" value="修改" />
    <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#add").bind("click", function () {
            $.MsgBox.Alert("訊息", "哈哈，新增成功！");
        });
        //回撥函式可以直接寫方法function(){}
        $("#delete").bind("click", function () {
            $.MsgBox.Confirm("溫馨提示", "執行刪除後將無法恢復，確定繼續嗎？溫馨提示", function () { alert("你居然真的刪除了..."); });
        });
        function test() {
            alert("你點選了確定,進行了修改");
        }
        //也可以傳方法名 test
        $("#update").bind("click", function () {
            $.MsgBox.Confirm("溫馨提示", "確定要進行修改嗎？", test);
        });
        //當然你也可以不給回撥函式,點選確定後什麼也不做，只是關閉彈出層
　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("溫馨提示", "確定要進行修改嗎？"); });
    </script>
</body>
</html>

jQuery實現自定義樣式的彈出視窗和確認框

(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btn

【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框

Html程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

百度地圖精準定位，自定義marker，自定義資訊彈出視窗。

先說下業務場景，在資料庫查出相應的專案展示出來，然後點選專案在百度地圖上標註專案的地址，同時彈出視窗顯示相關的資訊。下面就來看看具體的實現： 1.引入百度地圖相關的API，我這裡選的是web的JavaScript API。後端的

Jquery實現自定義訊息彈窗

當覺得瀏覽器的alert彈框太難看時，就會想動手自行編輯彈框啦，首先在html頁面0的插入彈框div。寫在body結束標籤前就行了。 <div id="cjy-maskBox"><

如何實現一個自定義的彈出框

.ewb-mesgbox { position: relative; width: 500px; background-color: #fff; } .ewb-msgbox-hd { height: 60px; line-height

自定義modal彈出樣式(swift)

0.假設vc是需要彈出的控制器(因為彈窗中有需要處理的事務,所以使用一個控制器管理) 1.彈出選單(使用modal將對應的控制器彈出) presentViewController(vc, animated: true, completion: nil

jQuery實現滑鼠移上彈出提示框，移出消失

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

微信小程式之動畫 —— 自定義底部彈出層

wxml： <view class='buy' bindtap='showBuyModal'>立即購買</view>  <view class="cover_screen" bindtap="hideBuyModal"

微信小程序之動畫 —— 自定義底部彈出層

modals num view radi let art time cit 點擊 wxml： <view class='buy' bindtap='showBuyModal'>立即購買</view> <!--

jquery實現--自定義視訊播放器

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

Android中自定義底部彈出框ButtomDialog

先看看效果和你要的是否一樣一、先來配置自定義控制元件需要的資源。 1.在res資料夾下建立一個anim資料夾並建立兩個slide_in_bottom.xml、slide_out_bottom.xml檔案，負責彈框進出動畫。 <?xml version="1.0" enco

dialog裡面實現自定義樣式單選按鈕功

先放效果圖：步驟： 1、建立一個繼承dialog的類 public class OutCallDialog extends Dialog implements android.view.View.OnClickListener { private RadioGro

簡單實現自定義Dialog彈窗

前言這幾天都在學習Web端的技術點，對於Android這麼好玩的技術，那麼也不能丟落。時間擠一擠，說不定還能擠出一條溝，呵呵..這幾天看到小夥伴們在專案中在為dialog相關的問題不知所措，看了大概的需求，都涉及到自定義dialog，其實也蠻簡單的，在

自定義的彈出浮動框-自動消失

Qt自定義樣式/無邊框視窗/子視窗模態/非模態問題

依舊是參考了諸多文章及帖子，最後測試總結如下： 1、只要是繼承自QWidget的視窗/物件，理論上都可以設定模態/非模態 2、模態是指除了本視窗內部控制元件外，直接使用.exec()執行（或先設定模態setWindowModality(Qt::ApplicationMo

android 自定義dialog彈出和消失動畫

自定義dialog視窗，根據座標可隨意設定dialog顯示位置，實現了視窗彈出動畫 Java程式碼： package com.sunxu.org.IndividualityDialog; import android.app.Activity; import and

CSS 實現自定義樣式的單選框與多選框

前端在開發的過程中，經常會遇見使用單選框以及多選框的情況，但是預設的選框按鈕的樣式單一，一般我們需要去自定義一些選框按鈕的樣式；通常情況下，單選、多選為方便自定義樣式，一般會採用input+

Unity自定義訊息彈出框

參考下面兩個連結：【Unity技巧】自定義訊息框（彈出框） http://blog.csdn.net/candycat1992/article/details/24984347 這裡面的本地化文字方法好像不適合NGUI高版本，可以使用下面連結的本地化方法。 NGUI本地

自定義的彈出層。。彈出層不滾動，ie6不相容

自定義propertygrid彈出屬性編輯框

using System; using System.Drawing.Design; using System.ComponentModel; namespace *** { class propertyEdit:UITypeEditor//必須繼承該類，因為所有的propertygrid都是直接或間

jQuery實現自定義樣式的彈出視窗和確認框

相關推薦