jquery UI dialog 内iframe 如何调整大小

最新推荐文章于 2024-04-03 10:27:43 发布
转载 最新推荐文章于 2024-04-03 10:27:43 发布 · 2.3k 阅读 · 0

本文探讨了一个关于使用jQuery UI dialog展示打印预览iframe时遇到的宽度无法正确调整的问题。作者尝试了多种方法但iframe的宽度依旧没有变化，最终通过在外层包裹一层div并应用dialog方法来解决这一难题。 
$("<iframe width='100%' height='100%'  id='Preview' src='print_V1.jsp?type=preview' ></iframe>").dialog({
 	autoOpen: true, 
	modal: true, 
	height: 500,
	width: 800,
	resizable:false ,
	title: "打印预览如果需要打印请点击打印按钮" 
});

代码是这么写的，但是iframe的宽度就是不调整不动，试过用px也不行。请高手帮我看看是什么原因，如何修改。


在iframe外面再套一层div,在div上面.dialog

$("<div></div>").append($("<iframe></iframe")).dialog
iframe和你的一样
div没有任何属性和样式都可以


                

        

    

  



    



                



	

		

			

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

				
			

			

				

					12-09
				

			

		

		

			
				
jquery有个很不错的ui插件，dialog插件,他的官方网站上有各种形式的演示：http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式，具体的用法官网上都有，也有中文的讲解地址，我就不再重复了，最近在弄弹出框架页，仔细一看，和dialog插件的modal form 模式很相似，demo演示效果：http://www.lovewebgames.com/addNews.aspx 就是这么个效果，要进行登录注册弹出层，至于为什么我不直接用modal form来做呢？因为我喜欢，你管我。所以我就做了个jquery下面dialog的插件，需要引

			
		

	



                

            
              



	

		

			

				
					
jqdialog:jqueryUI 与 iframe

				
			

			

				

					06-21
				

			

		

		

			
				
jQuery UI Dialog是一款基于jQuery库的强大对话框组件，它提供了丰富的可定制化选项和多种交互模式，如模态对话框、非模态窗口、拖动、调整大小等功能。在某些场景下，我们可能需要在Dialog中嵌入外部页面或者动态...

			
		

	



              


  
              

                


	

		

			

				
					
Jquery Dialog Iframe

				
			

			

				

					我在努力，一直都在努力。
				

				

					03-21
					
					1万+
					
				

			

		

		

			
				
me配合JQueryUI dialog实现登录对话框效果 收藏<br />先上图：<br /> <br />其实里面的对话框是一个iframe，不把他们做到一个页面中主要方便模块式开发，而且可以带来禁用javascript的时候也能打开编辑界面的效果（当然关闭的时候还需要处理一下）：<br /><br />主要代码：把iframe显示为一个模拟对话框：<br /> $("<iframe id='editFrame' src='EditPersonPage.aspx?action=insert' />").d

			
		

	





	

		

			

				
					
iframe中的jquery ui modal dialog 覆盖父窗口

				
			

			

				

					汪云飞记录本
				

				

					12-05
					
					335
					
				

			

		

		

			
				
 function openDialog(){
        var $doc;
        if(window.location!=window.parent.location){// 页面在iframe中
            $doc=window.parent.jQuery.noConflict();
        }else{// 页面单独打开
           ...

			
		

	



		

			
		



	

		

			

				
					
jquery dialog using iframe url

				
			

			

				

					wilsonke的专栏
				

				

					12-04
					
					4721
					
				

			

		

		

			
				
Open Dialog

And JS:
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 600,
    open: function(ev, ui){
             $('#myIframe').attr('src','http://www.jQuery.com');
         

			
		

	





	

		

			

				
					
jquery ui FrameDialog 中打开对话框后重置大小

				
			

			

				

					hwbox的专栏
				

				

					03-09
					
					1896
					
				

			

		

		

			
				
在jquery的应用中，我们可以选择使用 jquery ui来快速完成前端搭建，当然jquery ui不能做页面布局是很让人伤心的一件事。
但最让人无法忍受的还是它的那个dialog无法打开一个新网页，而只能打开一个本网页上的容器元素。
所幸有人有同样的需求，所以有了这个jquery ui扩展插件jquery ui framedialog.
但随之而来的另一个问题是，这个窗口没办法改变大小，

			
		

	





	

		

			

				
					
JQuery UI Dialog

				
			

			

				

					01-27
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					12-09
				

			

		

		

			
				
在使用jQuery UI库创建Dialog对话框时，可能会遇到表单无法正常提交的问题。这主要由于jQuery UI在初始化Dialog时，会将Dialog元素附加到`<body>`而非`<form>`标签内部，导致表单元素失去与`<form>`的关联，从而影响...

			
		

	





	

		

			

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

				
			

			

				

					论文数据分析辅导,；论文人工智能辅导 huazhongxiaosx
				

				

					08-02
					
					3690
					
				

			

		

		

			
				
(function ($) {
    $.fn.openWidow = function (options) {
        var divId = "dialog" + Math.round(Math.random() * 100);
        var settings = {
            id: divId,
            width: 300,

			
		

	





	

		

			

				
					
封装element Dialog实现全屏、最小、双击回复原状和拖拽功能

				
			

			

				

					Queen-Shir的博客
				

				

					07-28
					
					3157
					
				

			

		

		

			
				
https://www.jianshu.com/p/fa36f0ed9222


			
		

	





	

		

			

				
					
用JqueryUI的Dialog+IFrame实现仿模态窗口效果

				
			

			

				

					男神的专栏
				

				

					06-03
					
					461
					
				

			

		

		

			
				
window.open方法确实可以，但是有它的局限性，比如，标题显示为URL，点一下其他地方窗口会消失，然后点其他图片的时候，死活都出不来，原来是前面打开的窗口没被关闭，ETC....于是你又想到了模态窗口，但是模态窗口有一个不好的地方，只能适用于IE浏览器，而且样式貌似也不咋地。大家可以注意到，我前面用的是window.open方法，只是注释掉了而已。另外，这篇文章我个人认为不是什么很水的文章，因为我看过一些其他的同类型的DIV仿模态窗口的，但是感觉都没讲到点子上，我希望这篇文章对大家有所帮助吧。

			
		

	





	

		

			

				
					
jquery easyui dialog的几个使用问题

				
			

			

				

					bbrruucc的博客
				

				

					09-15
					
					626
					
				

			

		

		

			
				
jquery easyui dialog可以两种方式使用
1)定义div,使用iframe

    

需要显示dialog时使用以下2行即可
$('#openXXXIframe')[0].src='xxxEdit.action';
$('#openRoleDiv').dialog('open');

2)不使用iframe(请参见easyui的demo)

    Dia...

			
		

	





	

		

			

				
					
art.dialog弹出框后再根据其内部iframe的大小调整大小

				
			

			

				

					小强快跑~~
				

				

					09-28
					
					4650
					
				

			

		

		

			
				
1、主页面，用来弹出弹出页面
		//查看错误小练习
		$.exerciseClick = function(rowId ){
			$.event.get().preventDefault();
			
			var tdScore = $("#" + rowId).find("[aria-describedby='homeworkStudentListGrid_score']");
			

			
		

	





	

		

			

				
					
自定义Dialog调整宽高大小

				
			

			

				

					浅颜如梦
				

				

					10-15
					
					2245
					
				

			

		

		

			
				
private void showDialog(View view) {
        dialog = new Dialog(mActivity, R.style.AlertDialogTheme);
        dialog.setContentView(view);
        
        display = mActivity.getWindowManager().getD

			
		

	





	

		

			

				
					
jQueryUI dialog 修正不能遮盖某些内嵌iframe的bug

				
			

			

				

					我想我是海 冬天的大海 心情随风轻摆
				

				

					05-30
					
					2227
					
				

			

		

		

			
				
在打开dialog时，添加
var $iframeShim = $("");//保证绝对能盖住
var $divShim = $("");//保证 resizable 有效
var bgInfo = { width: $(".ui-widget-overlay").width(), height: $(".ui-widget-overlay").height() };
$iframeShim.w

			
		

	





	

		

			

				
					
让iframe自适应大小 解决方案

					
热门推荐

				
			

			

				

					小马的专栏
				

				

					11-13
					
					3万+
					
				

			

		

		

			
				
 第一种：        onload="this.height =   document.frames[src].document.body.scrollHeight" />例子：1，创建页面 test.html 。 页面中含有一个 iframe，name为 ifrname ，id为 ifrid， src 为 iframe.html页面。  scrolling=""> 

			
		

	





	

		

			

				
					
iframe 高度根据子页面来确定

				
			

			

				

					Start2019
				

				

					05-31
					
					2667
					
				

			

		

		

			
				
因为我这是 宽度已知，整体居中的布局，滚动条加在 iframe 上会很奇怪，而且iframe的高度不确定，所以只能加给父级body上。

注意 iframe 标签中的 scrolling要为 “no”
iframe 和 $.load() 的区别：
怎么让iframe的高度和宽度可以100%https://bbs.youkuaiyun.com/topics/390329086


iframe嵌套界面自适应，可高度自由收缩

...

			
		

	





	

		

			

				
					
关于对话框中放iframe ，内页高度问题

					
最新发布

				
			

			

				

					qq_34907249的博客
				

				

					04-03
					
					620
					
				

			

		

		

			
				
解决思路：动态修改iframe高度。

			
		

	





	

		

			

				
					
jQuery UI Dialog核心属性详解：autoOpen, bgiframe, buttons & closeOnEscape

				
			

			

				

					
				

			

		

		

			
				
"jQuery UI Dialog 属性详解"  在jQuery UI库中，Dialog功能是创建可定制的对话框组件的强大工具。对话框（Dialog）允许我们在页面上弹出窗口，提供额外的信息或进行交互操作。本文将详细介绍五个关键的Dialog属性：...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值