弹出窗口js实现

最新推荐文章于 2024-07-03 00:41:29 发布

J_ijava

最新推荐文章于 2024-07-03 00:41:29 发布

阅读量155

点赞数

文章标签： javascript ViewUI

分别用专门的js弹窗框架与Extjs框架作出的弹出窗口比较,代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>弹窗实验</title>
		<!--
        	作者：3083996241@qq.com
        	时间：2014-11-18
        	描述：弹窗框架实现
        -->
		<script type="text/javascript" src="js/artDialog.source.js?skin=blue"></script>
		<script type="text/javascript" src="js/iframeTools.source.js"></script>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<!--
        	作者：3083996241@qq.com
        	时间：2014-11-18
        	描述：Extjs 弹窗
        -->
		<link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext-2.1/ext-base.js"></script>
		<script type="text/javascript" src="ext-2.1/ext-all.js"></script>
		<script type="text/javascript" src="ext-2.1/ext-lang-zh_CN.js"></script>
		<script type="text/javascript">
			var win = null;
			Ext.onReady(function() {
				win = new Ext.Window({
					title: 'wb2弹窗',
					width: 400,
					height: 300,
					modal: true,//窗口弹出后,原主页面无法操作
					//applyTo:
					html: '<p>某日上课，老师宣布下节课小考</p>'//指定弹窗内容
				});
			});

			function tc2() {
				win.show();
			}
		</script>
		<script type="text/javascript">
			function tc1() {
				art.dialog.open('wb1.html', {//指定URL,弹出窗口内容为该URL
					//id='',
					title: 'wb1弹窗',
					width: 400,
					height: 150,
					lock: true//窗口弹出后,原主页面无法操作
				});
			}
		</script>
	</head>

	<body>
		<a href="javascript:tc1();">弹窗-1</a>
		<br />
		<a href="javascript:tc2();">弹窗-2</a>
	</body>

</html>

弹窗截图:

J_ijava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出窗口js实现

分别用专门的js弹窗框架与Extjs框架作出的弹出窗口比较,代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;弹窗实验&lt;/title&gt; &lt;!-- 作者：3083996241@qq.com
复制链接

扫一扫