制作一个页面弹出窗口

在网站开发过程中经常会遇到这样的需求：要求点击某个按钮的时候可以在原来页面的基础上弹出一个对话框窗口，该窗口可以添加文本输入框、按钮等控件，然后可以接受用户的输入。经过本人一番研究，总结代码如下：

html文件中：

<span id="upgrade" onclick="upgrade()">级别升级</span>

<div class="form">
　　<h3>级别升级</h3>
　　<p>新代理级别:
　　　　<select>
　　　　　　<option>总代理</option>
　　　　　　<option>一级代理</option>
　　　　　　<option>二级代理</option>
　　　　　　<option>三级代理</option>
　　　　　　<option>四级代理</option>
　　　　</select>
　　</p>
　　<p id="btn">
　　　　<button onclick="cancel()">取消</button>
　　　　<button>提交</button>
　　</p>
</div>

 

css文件中：

.form {
height: 300px;
width: 260px;
background: #fff;
display: none;
position: absolute;
z-index: 999;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding:40px 20px 0 30px;
}

 

js文件中：

//代理级别升级
function upgrade()
{
　　$( '<div id="windowBG"></div>' ).css( {
　　　　width : $(document).width(),
　　　　height : $(document).height(),
　　　　position : 'absolute',
　　　　top : 0,
　　　　left : 0,
　　　　zIndex : 998,
　　　　opacity : 0.3,
　　　　filter : 'Alpha(Opacity = 30)',
　　　　backgroundColor : '#000000'
　　} ).appendTo( 'body' );

　　var obj = $( '.form' );
　　obj.css( {
　　　　left : ( $( window ).width() - obj.width() ) / 2,
　　　　top : $( document ).scrollTop() + ( $( window ).height() - obj.height() ) / 2
　　} ).fadeIn();
}

//取消级别升级
function cancel()
{
　　$( '.form' ).fadeOut( 'slow', function () {
　　　　$( '#windowBG' ).remove();
　　} );
}

 

实现的功能效果：点击“级别升级”时会弹出一个对话框，点击对话框中的“取消”按钮时对话框就消失了。