VS2010下一个简单弹出层的制作
来源：互联网 发布：foobar2000 mac 中文 编辑：程序博客网 时间：2024/06/01 07:24
因为公司做的网站要用jquery来做前台交互，所以就自学了jquery这个框架，下面是一个弹出层的代码，给大家分享下
<%@ Page Language="C#" validateRequest="false" %>
<%@ Register assembly="FredCK.FCKeditorV2" namespace="FredCK.FCKeditorV2" tagprefix="FCKeditorV2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery 弹出层测试版 </title>
<script type="text/javascript" src="scripts/jquery-1.4.1-vsdoc.js"></script>
<style type="text/css">
#dialog-overlay{width:100%;height:100%;background:#000;position:absolute;top:0;left:0;z-index:4000;display:none;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6}
#dialog-box{display:none;background:#f7f7f7;width:328px;position:absolute;z-index:5000}
.dialog-content{padding:10px;margin:13px;color:#666;text-align:center}
#close{margin:10px auto 0 auto;text-align:center;background-color: #e33100;display: block;width:50px;padding: 5px 10px 6px;color: #fff}
</style>
</head>
<body>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message">
//你的内容
<input type="checkbox" value="tt" />
<input type="text" value="a" />
<input type="text" value="a" />
<input type="text" value="a" />
</div>
<a href="javascript:void(0);" id="close">关闭</a>
</div>
</div>
<input type="button" id="box" value="tt"/>
<script type="text/javascript">
function popup() { //弹出层主代码
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var dialogTop = $(window).scrollTop() + ($('#dialog-box').height() / 3);
var dialogLeft = (maskWidth / 2) - ($('#dialog-box').width() / 2);
$('#dialog-overlay').css({ height: maskHeight, width: maskWidth }).show();
$('#dialog-box').css({ top: dialogTop, left: dialogLeft }).show();
}
$(function () {
$('#close,#dialog-overlay').click(function () { $('#dialog-overlay,#dialog-box').hide(); }); //隐藏弹出层
$(window).resize(function () { if (!$('#dialog-box').is(':hidden')) popup(); }); //窗口大小改变时改变弹出层的位置
$('#box').click(function () { popup(); }); //单击时触发弹出层事件
})
</script>
</body>
</html>
- VS2010下一个简单弹出层的制作
- 制作漂亮的弹出层
- 弹出层效果的制作
- 简单的div弹出层
- 实现简单的弹出层
- 简单的弹出层代码
- 简单的div弹出层
- js制作弹出层
- html页面中如何简单制作弹出窗口层
- 一个简单的JQuery弹出层类
- easyDialog 简单、实用的弹出层组件
- 简单易用的div弹出层
- 最简单的弹出层效果
- 简单易用的Div弹出层
- 非常简单好看的JQuery弹出层
- 简单的弹出层， 模拟保存时弹出保护
- 简单弹出层实例
- jquery简单的弹出层浮动层代码
- 数据类型 -- char , unsigned char = BYTE, short, unsigned short = WORD, long, unsigned long = DWORD, int , unginged int = UINT
- js结合正则式去掉字符串的左右空格
- matlab 使用的一点儿体会(for beginner)
- 结构体位操作--反汇编(二)
- ASP.Net访问母版页(MasterPage)控件、属性、方法及母版
- VS2010下一个简单弹出层的制作
- 添加用户到root组共享/home
- C/C++程序员常见面试题深入剖析
- 导出Outlook里的全球通讯录到Excel
- mysql 用户权限设置
- vc++调用matlab函数
- Android SDK安装
- fsockopen手工GET/POST数据
- nohup 命令
