FirstBlood-jquery弹窗插件

页面导航:首页 > 网络编程 > JavaScript > FirstBlood-jquery弹窗插件

FirstBlood-jquery弹窗插件

来源: 作者: 时间:2016-01-23 10:23 【

嗯,这是第一次用插件形式写的弹出提示窗口,经验尚浅,写得也不好。 *-------------------------------*Author: D pan* Date: 2015 6 15*Version: 1 0* Description: 弹窗插件-----------

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

 

/*-------------------------------
*	Author: D.pan
*   Date: 2015/6/15
*	Version: 1.0
*   Description: 弹窗插件
-------------------------------*/
;(function($){

	var defaultSetting = {
		title : '', //标题
		closeText : '关闭', //关闭按钮
		content : '', //内容
		boxId : 'popDiv', //弹窗id
		closeId : 'closeBtn', //关闭按钮id
		boxClassName : '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 $('
'+con+'
'); } })(jQuery);

 

 

Demo页面:

 




<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script><script type="text/javascript" src="JS/popUp.js"></script>


 

 

:

 

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


样子如下:

\


 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<