分别用专门的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>
弹窗截图: