插件的框架代码（不支持chrome）：
;(function ($) {
$.extend({
"modalwindow": function (options) {
//这里写插件代码
}
});
})(jQuery)
html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ; charset="utf-8"/>
<title>弹出窗口使用示例</title>
<style type="text/css">
body {
margin: 20px;
}
body, input {
font-size: 9pt;
}
#test {
font-size: 9pt;
500px;
height: 50px;
}
</style>
<script src="js/jquery-2.2.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="js/jquery.modalwindow.js" type="text/javascript"></script>
<script type="text/javascript">
// 在页面加载时，为按钮关联事件处理代码
$(function () {
//应用自定义的modalwindow插件
$("#modalwindow").click(function () {
$.modalwindow({
url: "http://www.baidu.com"
});
})
})
</script>
</head>
<body>
<div id="test">这个示例演示了自定义类级别的插件的使用方法</div>
<input type="button" name="getdata" id="modalwindow" value="单机弹出窗口">
</body>
</html>
jquery.modalwindow.js：
;(function ($) {
$.extend({
"modalwindow": function (options) {
//设置属性
options = $.extend({
url: "https://www.baidu.com/", //打开的网址
vArguments: null, //参数
dialogHeight: "200px", //对话框高度
dialogWidth: "500px", //对话框宽度
dialogLeft: "100px", //左侧位置
dialogTop: "50px", //右侧位置
status: "no", //是否显示状态条
help: "no", //是否显示帮助按钮
resizable: "no", //是否允许调整尺寸
scroll: "no" //是否显示滚动条
}, options);
//弹出窗口
var retVal = window.showModalDialog(options.url, options.vArguments, "dialogHeight:" + options.dialogHeight +
";dialogWidth:" + options.dialogWidth + ";dialogLeft:" + options.dialogLeft + ";dialogTop:" + options.dialogTop +
";status:" + options.status + ";help:" + options.help + ";resizable:" + options.resizable + ";scroll:" +
options.scroll + ";");
//返回弹出式窗口
return retVal; //返回窗口引用值
}
})
})(jQuery)
result：
