`
happyqing
  • 浏览: 3204584 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery ui dialog 加载单独页面,不使用iframe

阅读更多

 

使用iframe加载页面,

优点,没有冲突,缺点:需要单独引用css,js

 

一、使用ifame

方式一:

感觉这个好点,不用总重新创建iframe

<div style="display:none;overflow:hidden;padding:3px" id="dialog"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" id="prodcutDetailSrc"  scrolling="no"  width="100%" height="100%"></iframe></div>

 

$("#prodcutDetailSrc").attr("src","ProductDetails.aspx?id=" + $(this).attr("id")); //设置IFRAME的SRC;
$("#dialog").dialog({dialogoptions});

 https://www.cnblogs.com/kmsfan/p/4119788.html

 

方式二:

$("<iframe id='editFrame' src='http://localhost:8080/upf/test.jsp' />").dialog({autoOpen: true, modal: true, title: "新增人员" });

 https://blog.csdn.net/codefighting/article/details/6263776

 

二、不使用ifame

用load方法加载,推荐

<div id="dlgCheckRole" class="hide"></div>

 

$("#dlgCheckRole").load(contextPath+"/role/checkRole?userId="+userId).removeClass('hide').dialog({dialogoptions});

 https://stackoverflow.com/questions/5660263/how-to-display-an-iframe-inside-a-jquery-ui-dialog

 

分享到:
评论

相关推荐

    JQuery UI Dialog

    当 bgiframe 属性被设置为 true 时,JQuery UI Dialog 将在 IE6 下使用 iframe 来覆盖 select 元素,以确保对话框能够正确地显示。 三、width 和 height 属性 width 和 height 属性用于设置对话框的宽度和高度。...

    jQuery UI Frame Dialog官方修正版(官方1.1.2版本上面有问题)

    jQuery UI Frame Dialog是一款基于jQuery UI库的对话框插件,用于在网页中创建具有框架效果的弹出对话框。在官方1.1.2版本中,存在一个CSS加载问题,导致对话框的样式可能无法正常显示,影响了用户体验。这个问题在...

    jQuery UI仿webqq桌面系统WebOS界面操作

    点击图标会弹出一个窗口,窗口内部可能嵌入了一个iframe或者使用Ajax加载内容,以实现类似桌面应用的功能。此外,系统还可能有任务栏、通知中心、设置面板等常见桌面系统的功能。 总的来说,这个项目展示了如何利用...

    jqdialog:jqueryUI 与 iframe

    总之,jQuery UI Dialog结合iFrame可以实现灵活的弹窗展示和内容加载,而Nginx的正确配置则有助于解决跨域访问问题,确保内容能够顺利加载。在实际开发中,还需要考虑性能优化、用户体验、安全性等因素,确保应用的...

    iframe弹出框遮罩父类页面

    总的来说,"iframe弹出框遮罩父类页面"是一个常见的前端交互需求,通过合理使用`iframe`、JavaScript和CSS,以及像EasyUI这样的库,可以实现高效、简洁的解决方案。理解并掌握这些知识点对于提升网页交互体验至关...

    Jquery dialog

    jQuery Dialog 基于 jQuery UI,可以与其他 jQuery UI 组件结合使用,如 Datepicker 或 Slider。同时,社区提供了许多第三方插件来增强 Dialog 的功能。 ### 示例代码 下载的压缩包 `jquery-jquery-ui-8226f9f` ...

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

    在本文中,我们将探讨如何将jQuery UI的Dialog插件修改为使用IFrame来展示框架页。Dialog插件是jQuery UI库中的一个强大组件,通常用于创建可自定义的模态对话框。它提供了多种功能,如调整大小、移动、动画效果以及...

    jquery弹窗

    本文将深入探讨jQuery弹窗及其相关的jQuery UI库,特别是关于iframe弹窗的使用。 一、jQuery弹窗基础 jQuery弹窗通常基于JavaScript的DOM操作和事件处理功能,通过创建或修改DOM元素来实现弹出效果。jQuery提供了`...

    jquery-ui_dialog属性学习.txt

    ### jQuery UI Dialog 属性详解 #### 一、`autoOpen` 属性 - **默认值**:`true` - **作用**:控制对话框在初始化时是否自动打开。 - 当 `autoOpen` 设置为 `true` 时,对话框在创建后立即显示。 - 若设置为 `...

    Jquery自带弹出框效果

    5. **与其他jQuery UI组件的集成**:Dialog可以与其他jQuery UI组件(如Datepicker、Autocomplete等)结合使用,创建更复杂的功能,比如在弹出框中显示日历选择器。 6. **响应式设计**:虽然jQuery UI本身并不直接...

    dialog ui jquey .net c# 弹出对话框

    此外,如果你的对话框是一个新的aspx页面,你可能需要考虑使用IFrame来加载这个页面,以便在一个独立的窗口中展示。 总结起来,jQuery UI的`dialog`组件结合ASP.NET C#技术,能够提供强大的用户交互体验。通过灵活...

    jQuery弹出层插件大全

    4. **jQuery UI Dialog**: jQuery UI Dialog是jQuery UI库的一部分,可创建模态或非模态对话框。Dialog组件提供了丰富的功能,如自动关闭、定时器、关闭按钮、标题和宽度设置。它还支持拖动和调整大小操作,适合创建...

    jquery,中文手册,jquery api,jquery ui,插件

    jQuery UI是jQuery的一个扩展库,提供了丰富的用户界面组件,如日期选择器、对话框、拖放功能、排序等。这些组件极大地提升了用户体验,且可以自定义样式以匹配网站设计。 1. **Dialog**:创建模态或非模态对话框,...

    jQuery UI的Dialog无法提交问题的解决方法

    在使用jQuery UI的Dialog控件时,可能会遇到表单无法提交的问题。本文将详细介绍这一问题及其解决方法。具体来说,表单在Dialog控件中无法提交通常表现为提交按钮点击无效,或者即使页面产生了提交,服务器端也无法...

    jQuery Dialog对话框事件用法实例分析

    在使用Dialog组件前,确保已经将jQuery库和jQuery UI库引入到页面中。创建一个Dialog的基本做法是选择一个DOM元素,然后使用".dialog()"方法将其转换成对话框,并可传递options参数来配置对话框的各种行为,例如: ...

    d另一种树形控件,dialog 另一种活用 用iframd的方式加载其他jsp

    标题中的“d另一种树形控件,dialog 另一种活用 用iframe的方式加载其他jsp”指的是在IT开发中,特别是在Web应用中,如何利用树形控件(tree control)和对话框(dialog)实现更灵活的功能。在这个场景中,开发者...

    5个Jquery模态窗口

    然而,对于不使用Bootstrap的项目,引入额外的CSS和JS文件可能会增加页面加载时间。 2. **jQuery UI Dialog**:jQuery UI库提供了Dialog组件,可以创建可自定义的模态窗口。它支持多种配置选项,如拖动、调整大小、...

Global site tag (gtag.js) - Google Analytics