插件的框架代码（不支持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; width: 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：
时间： 2024-11-05 13:44:01