嗯，这是第一次用插件形式写的弹出提示窗口，经验尚浅，写得也不好。
/*-------------------------------
* 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 $('<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;
}
样子如下：
时间： 2024-11-06 21:23:19