这个跟我之前帮解决的一个问题相似：
代码一：
HTML：
1
2
<input type="button" value="增加" onclick="addBtn()" />
<textarea id="output"></textarea>
JS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
//点击增加按钮事件
function addBtn(){
//生成一个div
var boxDiv = document.createElement('div');
boxDiv.className = 'box'; //添加我们自定义的样式
boxDiv.id = 'boxId'; //给这个DIV添加一个ID,便于删除
//这里我偷了点懒，直接写了HTML代码，其实也可以像上面一样一个个添加，我这样只是来得快一些而已，这种风格不可取，切记！
boxDiv.innerHTML = "<form><table><tr><td>用户名：</td><td><input type='text' id='name' /></td></tr><tr><td>密码：</td><td><input type='password' id='pwd' /></td></tr><tr class='btn'><td colspan='2'><input type='button' value='确定' onclick='addOK()' /><input type='reset' value='重置' /><input type='button' value='取消' onclick='removeDiv()' /></td></tr></form>";
document.body.appendChild(boxDiv);
}
//生成的确定按钮事件
function addOK(){
var name = document.getElementById('name').value; //获取用户名
var pwd = document.getElementById( 'pwd' ).value; //获取密码
document.getElementById('output').innerText = name + ' ' + pwd ; //这里只是进行一个简单的显示
//移除添加的DIV
removeDiv();
}
//移除DIV事件
function removeDiv(){
var boxDiv = document.getElementById('boxId');
document.body.removeChild( boxDiv );
}
</script>
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
.box
{
width:300px;
height: 120px;
position: fixed;
z-index:30;
border:1px solid #ccc;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background-color:#fff;
padding:10px;
}
.box form
{
margin-left:20px;
margin-top:20px;
}
.btn
{
text-align: center;
}
.btn input
{
width:80px;
margin-top:10px;
margin-right: 10px;
}
</style>
方法二：
这个是我用Jquery写的一个插件:
JQuery：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/*-------------------------------
* Author: D.pan
* Date: 2015/6/15
* Version: 1.2
* Description: 弹窗插件
-------------------------------*/
;(function($){
var defaultSetting = {
title : '', //标题
closeText : '关闭', //关闭按钮
content : '', //内容
boxId : 'popDiv', //弹窗id
closeId : 'closeBtn', //关闭按钮id
boxClassName : 'popDiv', //外层容器样式
titleClassName : 'titleDiv', //标题行样式
closeBtnClassName : 'closeBtn', //关闭按钮样式
contentClassName : 'content', //内容样式
width : 450,
height : 200
}
$.extend({
'popUp':function(obj){
new popUpAni(obj?jQuery.extend(defaultSetting,obj):defaultSetting);
return this;
}
});
/*动画版本*/
function popUpAni(obj){
var $popUp = createDiv( '', obj.boxClassName, obj.boxId );
if( $( '#'+obj.boxId ).length <= 0 ){
$('body').append($popUp);
var $title = createDiv( obj.title, obj.titleClassName, '' );
$title.append( createDiv( obj.closeText, obj.closeBtnClassName, obj.closeId ) );
//动画显示
$('#'+obj.boxId).animate({ width:obj.width,height:obj.height},200 ).append( $title ).append( createDiv( obj.content, obj.contentClassName ) );
//为关闭按钮添加事件
$('#' + obj.closeId ).click(function(){
$('#'+obj.boxId).empty().animate({height:0,width:0},200).hide(2, function(){
$('#'+obj.boxId).remove();
});
});
}
}
/*正常版本*/
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.boxId).animate( { width:obj.width,height:obj.height } );
$('#' + obj.closeId ).click(function(){
$('#'+obj.boxId).remove();
});
}
}
function createDiv( con, cName, id ){
return $('<div class="'+(cName?cName:'')+'" id='+(id?id:'')+'>'+con+'</div>');
}
})(jQuery);
HTML:
在html中代码调用如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(function(){
$("#test").click(function(){
var obj = {
title: '弹出窗的标题',
content : 'First-blood jQuery Plug-in',
closeText : '关闭按钮的内容'
}
//写个对象设置参数
$.popUp(obj); //调用自己写的弹窗插件
});
});
</script>
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*弹窗样式*/
.popDiv
{
position: fixed;
top:0;
bottom: 0;
left:0;
right: 0;
margin:auto;
width: 0;
height: 0;
background-color: #fff;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
font-size:14px;
padding:5px;
z-index:30;
overflow: hidden;
}
/* 标题层 */
.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;