FirstBlood-jquery弹窗插件

来源：互联网发布：iphone免费读书软件编辑：程序博客网时间：2024/06/07 20:09

嗯，这是第一次用插件形式写的弹出提示窗口，经验尚浅，写得也不好。

/*-------------------------------*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);

Demo页面：

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

CSS:

/*弹窗样式*/.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;}

样子如下：

0 0