修改jquery里的dialog对话框插件为框架页(iframe) 的方法

jquery有个很不错的ui插件，dialog插件,他的官方网站上有各种形式的演示：http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式，具体的用法官网上都有，也有中文的讲解地址，我就不再重复了，最近在弄弹出框架页，仔细一看，和dialog插件的modal form 模式很相似，demo演示效果：http://www.lovewebgames.com/addNews.aspx 就是这么个效果，要进行登录注册弹出层，至于为什么我不直接用modal form来做呢？因为我喜欢，你管我。所以我就做了个jquery下面dialog的插件，需要引 在本文中，我们将探讨如何将jQuery UI的Dialog插件修改为使用IFrame来展示框架页。Dialog插件是jQuery UI库中的一个强大组件，通常用于创建可自定义的模态对话框。它提供了多种功能，如调整大小、移动、动画效果以及按钮配置等。然而，有时我们可能需要在对话框内加载外部页面，这时就可以利用IFrame实现。 我们需要理解Dialog的基本使用方法。Dialog插件通过调用`.dialog()`方法附加到一个DOM元素上，该元素通常是一个`<div>`。例如，我们可以创建一个空的`<div>`，然后初始化Dialog： ```html <div id="dialog" title="Dialog Title"></div> ``` 接着，通过以下jQuery代码启用Dialog： ```javascript $("#dialog").dialog({ autoOpen: false, width: 300, height: 200, modal: true, // 其他配置项... }); ``` 现在，让我们来看如何将Dialog转换为加载IFrame的对话框。这里，我们创建一个自定义的扩展函数，名为`.openWindow()`，它接受一些选项，如`url`，用于指定要加载的IFrame页面。以下是一个示例实现： ```javascript (function ($) { $.fn.openWindow = function (options) { // 创建一个随机ID var divId = "dialog" + Math.round(Math.random() * 100); var settings = { // 默认设置，包括ID、宽高、模态、按钮、动画效果、标题、URL、关闭回调 // ... }; // 合并用户提供的选项与默认设置 if (options) { $.extend(settings, options); } // 创建Dialog容器，并添加到body中 $("body").append('<div id="' + settings.id + '" title="' + settings.title + '"><p class="loading"></p></div>'); // 初始化Dialog，使用IFrame加载页面 $("#" + settings.id) .dialog({ autoOpen: false, title: settings.title, width: settings.width, height: settings.height, modal: true, bgiframe: true, show: settings.show, hide: settings.hide, buttons: settings.buttons, close: settings.close, open: function () { $("#" + settings.id).html('<iframe src="' + settings.url + '" frameborder="0" height="100%" width="100%" id="dialogFrame" scrolling="auto"></iframe>'); }, resizeStop: function () { $("#dialogFrame").css("width", parseInt($(this).css("width")) - 5); $("#dialogFrame").css("height", parseInt($(this).css("height")) - 5); }, }) .dialog("open"); return this; }; })(jQuery); ``` 在这个扩展函数中，我们创建了一个新的`<div>`元素，设置了其ID和标题，并在打开Dialog时动态插入IFrame。`resizeStop`回调用于调整IFrame的大小以适应Dialog的尺寸变化。 使用这个扩展，你可以像这样创建一个加载IFrame的Dialog： ```javascript $("#someElement").openWindow({ url: "/test.aspx", title: "IFrame Dialog", }); ``` 这种方法对那些不熟悉AJAX或者希望在独立环境中展示页面内容的开发者非常有用。IFrame可以提供一个沙盒环境，防止页面间的交互影响到主页面。同时，它也允许你加载跨域的内容（虽然受到浏览器同源策略的限制）。 作者鼓励对这个话题感兴趣的人加入他的QQ群，以便共同学习和交流问题。这种社区支持对于新手来说是非常有价值的资源，可以加速他们的学习过程。 总结来说，通过扩展jQuery UI的Dialog插件，我们可以轻松地创建包含IFrame的对话框，从而实现在模态窗口中加载外部网页的功能。这为开发者提供了更多的灵活性，特别是在处理复杂交互或需要独立环境的场景中。