FirstBlood-jquery彈窗外掛程式，firstblood-jquery
嗯，這是第一次用外掛程式形式寫的彈出提示視窗，經驗尚淺，寫得也不好。
/*-------------------------------*Author: D.pan* Date: 2015/6/15*Version: 1.0* Description: 彈窗外掛程式-------------------------------*/;(function($){var defaultSetting = {title : '', //標題closeText : '關閉', //關閉按鈕content : '', //內容boxId : 'popDiv', //彈窗idcloseId : 'closeBtn', //關閉按鈕idboxClassName : 'popDiv', //外層容器樣式titleClassName : 'titleDiv', //標題列樣式closeBtnClassName : 'closeBtn', //關閉按鈕樣式contentClassName : 'content', //內容樣式}$.fn.extend({'popUp':function(obj){new popUp(obj?jQuery.extend(defaultSetting,obj):defaultSetting);return this;}});function popUp(obj){var $popUp = createDiv( '', obj.boxClassName, obj.boxId );var $title = createDiv( obj.title, obj.titleClassName, '' );$title.append( createDiv( obj.closeText, obj.closeBtnClassName, obj.closeId ) );$popUp.append( $title );$popUp.append( createDiv( obj.content, obj.contentClassName ) ); if( $( '#'+obj.boxId ).length <= 0 ){$('body').append($popUp);$('#' + obj.closeId ).click(function(){$('#'+obj.boxId).remove();});}}function createDiv( con, cName, id ){return $('<div class="'+(cName?cName:'')+'" id='+(id?id:'')+'>'+con+'</div>');}})(jQuery);
<html><head><title>彈窗外掛程式</title><meta http-equiv="Content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="JS/popUp.js"></script> <link rel="stylesheet" type="text/css" href="css/css.css" /><style type="text/css">.showDiv{width:80%;margin:5% auto;max-width: 800px;border:1px solid #ccc;box-shadow: 5px 5px 5px #ccc;padding:20px;}</style></head><body style="height:1200px"><div class="showDiv"><input type="button" id="test" value="測試" /></div></body><script type="text/javascript">$(function(){$("#test").click(function(){var obj = {title: '快顯視窗',content : '這是我寫的第一個外掛程式'}$(this).popUp(obj);});});</script></html>
/*彈窗樣式*/.popDiv{ position: fixed; left:0; right: 0; margin:auto; max-width: 500px; width:80%; background-color: #fff; border:1px solid #ccc; box-shadow: 0 0 5px #ccc; font-size:14px; padding:5px;}/* 標題層 */.titleDiv{ border-bottom: 1px solid #ccc; padding:5px; height: 25px;}/*關閉按鈕*/.closeBtn{ float:right; cursor: pointer; margin-right: 5px; color:#000; font-weight: bold;}/*內容層*/.content{ padding:5px; text-indent: 2em;}
樣子如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
