jQuery:CSS陰影對話方塊

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

jQuery外掛: jquery.widget.shadowbox.js

/** * 一個簡單的設定DIV陰影的外掛 * * 功能: * 1. 根據陰影寬度自動調整外層容器寬度,以及透明度 * 2. 可定義ShadowBox的寬度和高度 * 3. 可用CSS樣式表定義視覺化樣式 * * @author joe.he <developerworks@163.com> * @copyright irgs.cn */ (function(jQuery) { jQuery.fn.shadowbox = function(settings) { var self = this; // 預設設定 var defaults = { shodowWidth: 20, css: { outer: 'widget-shadowbox-outer', shadow: 'widget-shadowbox-shadow', } }; if (settings) jQuery.extend(defaults, settings); // 設定陰影層的CSS樣式 var shadow = jQuery("<div>") .addClass(defaults.css.shadow) // 關聯一個CSS樣式規則,可以自定義陰影樣式 .width(self.width()) .height(self.height()) .css({ marginTop:defaults.shodowWidth+"px", marginLeft:defaults.shodowWidth+"px", zIndex:-100, position: "absolute" }); var outer = jQuery("<div>") .addClass(defaults.css.outer) .width(self.outerWidth()+defaults.shodowWidth) .height(self.outerHeight()+defaults.shodowWidth) .css({ position: "absolute", zIndex:999 }); this.prepend(shadow).wrap(outer.get()); // 返回jQuery物件使用者鏈式呼叫 return this; }; })(jQuery);

HTML頁面: jquery.widget.shadowbox.html

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript" src="jquery.widgets.shadowbox.js" mce_src="jquery.widgets.shadowbox.js"></mce:script> <title>CSS 陰影層</title> <link type="text/css" rel="stylesheet" href="jquery.widget.shadowbox.css" mce_href="jquery.widget.shadowbox.css" /> </head> <body> <div class="operations"> <a href="javascript:void(0);" mce_href="javascript:void(0);" id="toggleDialog">顯示對話方塊</a> </div> <div class="content"> <div class="titlebar">標題文字</div> <p>jQuery Shadow Box 外掛示例</p> <pre> 功能: 1. 根據陰影寬度自動調整外層容器寬度,以及透明度 2. 可定義ShadowBox的寬度和高度 3. 可用CSS樣式表定義視覺化樣式 1) widget-shadowbox-outer: 外層容器 2) widget-shadowbox-shadow: 陰影樣式 jQuery(document).ready(function() { jQuery("div.content").shadowbox({ shodowWidth: 5, shadowopacity: 0.2 }); }); </pre> <div class="bottombar"> <input type="submit" value="確定"> <input type="button" value="取消""> </div> </div> <mce:script type="text/javascript"></mce:script> </body> </html>

CSS 樣式表:

@CHARSET "UTF-8"; body { font-family: Verdana; font-size: 12px; } pre { font-family: Verdana; font-size: 12px; } p { text-indent: 2em; } pre { margin-left: 2em; line-height: 150%; } /*容器層*/ .widget-shadowbox-outer { position: absolute; } /*陰影層*/ .widget-shadowbox-outer .widget-shadowbox-shadow { background: #87A34D; opacity: 0.3; } /*內容層*/ .content { /*定義內容層的背景色,覆蓋陰影DIV的背景色*/ border: 1px solid #628D0B; width: 500px; height: 400px; background: #fff; margin: 10px; } .content .titlebar { font-weight: bold; padding: .7em 1em; color: white; background: #87A34D; vertical-align: middle; font-size: 12px; } .content .bottombar { font-weight: bold; padding: .5em 1em; color: black; background: #DCEAC0; text-align: right; color: black; } .content .bottombar input { margin-left: 5px; } .hide {display: none;}

jQuery:CSS陰影對話方塊

jQuery:CSS陰影對話方塊

jquery-easy dialog對話方塊基本用法

jquery自定義對話方塊alert、confirm和prompt

jquery+css實現自定義對話方塊功能（不使用外掛）

jquery easyUI的dialog方法彈出對話方塊多個按鈕進行選擇

CSS 實現三角形對話方塊

html5+css實現六位數字密碼輸入對話方塊（類似支付寶，微信）

共享一款基於 jQuery 的多功能對話方塊外掛 jBox，強不強大，用了才知道：）

jquery-easyui彈出對話方塊被ActiveX控制元件遮擋

jquery 對話方塊（Dialog）外掛

jquery外掛封裝：彈出div對話方塊

JQuery的Boxy彈出模態對話方塊，如何獲得頁面的返回值returnValue

jquery外掛之彈出對話方塊效果

純css實現氣泡對話方塊尖角處理

Jquery實現確定取消對話方塊

jQuery+bootstrap實現美化警告/確認/提示對話方塊外掛

JQuery validate驗證訊息彈出對話方塊

用css偽類實現提示對話方塊的小三角，哈哈！

通過純JS和css實現自定義彈出對話方塊

關於css陰影和浮動

jQuery:CSS陰影對話方塊

相關推薦