js之模态、非模态框

最新推荐文章于 2021-06-07 14:04:57 发布
最新推荐文章于 2021-06-07 14:04:57 发布
阅读量566 收藏
点赞数
分类专栏： js之旅
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010744481/article/details/50127529
版权 

非模态框
window.open(url,'','height=500, width=400,scrollbars=yes,resizable=yes,top='+(screen.availHeight-400)/2+',left='+(screen.availWidth-690)/2);

模态框
 
window.showModalDialog(url,this,'dialogWidth:800px;dialogHeight:500px;status:no;help:no;center:yes;resizable:Yes;');

 
 
 

 
 
  


                

        

        

    

  


    

      

        

            

              
                
                  Huijyuyang
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JavaScript模态窗口与非模态窗口

				
			

			

				

					认真搞技术
				

				

					01-17
					
					465
					
				

			

		

		

			
				
1. 非模态窗口刷新

在父页面打开子页面代码为：
window.open(url,' ','height= 500px, width= 760px');

子页面刷新父页面代码为：
window.opener.document.location.reload();

2.模态窗口刷新

父页面打开子页面：
window.showModalDialog(url,'window','dialogH...

			
		

	



                

              
                



	

		

			

				
					
模态窗口 javascript 技巧汇总（传值、打开、刷新）

				
			

			

				

					hailang123_love的专栏
				

				

					11-02
					
					999
					
				

			

		

		

			
				
1、要弹出的页面中，一定要保证标签间有，否则会弹出的模态窗口上，点击按钮时，会再次弹出一个新页面。
2、被弹出页面的按钮的事件处理中，应该有Response.Write(new Function().ClosePage());语句，用以关闭当前的模态窗口。
3、因为幽默的缓存原因，如果你在模态窗口中修改了数据，你会发现，父页面上的数据刷新了，但是当你再点击按钮，重新弹出模态窗口时，你会发现模态

			
		

	



                


  
              

                


	

		

			

				
					
js中模态窗口与非模态窗口

				
			

			

				

					Yvan's 
				

				

					07-24
					
					878
					
				

			

		

		

			
				
转：http://hi.baidu.com/nirvanan/blog/item/24e09e51ab25dc6b843524ae.html下面是我做的一个实例。A.html用模态打开B.html的时候传一个person参数，B.html进行数据操作之后返回一个信息告诉A.html是否完成。代码如下： A.html http://www.w3.org/TR/html4/strict.d

			
		

	





	

		

			

				
					
javascript模态,非模态窗体

				
			

			

				

					weixin_30875157的博客
				

				

					11-29
					
					84
					
				

			

		

		

			
				
转自：http://www.cnblogs.com/luluping/archive/2010/08/30/1812756.html
一、showModalDialog和showModelessDialog有什么不同？　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。　　showModelessDialog：被...

			
		

	



		

			
		



	

		

			

				
					
js弹出模态与非模态页面

				
			

			

				

					weixin_30781631的博客
				

				

					12-23
					
					106
					
				

			

		

		

			
				
js弹出模态与非模态页面1、非模态页面
window.open()
子页引用父页
window.opener
2、模态页面
window.showModalDialog(url,window,"dialogHeight:200px;dialogWidth:200px;center:Yes;Help:No;Resizable:No;Status:Yes;Scroll:auto;Status...

			
		

	





	

		

			

				
					
js 实现模态框 model.js

				
			

			

				

					09-28
				

			

		

		

			
				
js 实现模态框

			
		

	





	

		

			

				
					
实例详解BootStrap的动态模态框及静态模态框

				
			

			

				

					10-18
				

			

		

		

			
				
使用动态模态框时，通常需要绑定事件处理器，并使用Bootstrap提供的模态框组件相关的JavaScript方法来控制模态框的显示和隐藏。在上面提供的代码中，可以看到一个动态模态框的示例，通过点击一个按钮来触发显示模态...

			
		

	





	

		

			

				
					
js实现简单模态框实例

				
			

			

				

					10-17
				

			

		

		

			
				
JavaScript 实现简单模态框是一种常见的前端交互设计，它允许用户在不离开当前页面的情况下进行交互，例如输入信息、确认操作或查看详细内容。在网页设计中，模态框经常用于登录、注册、提示信息等场景。下面我们将...

			
		

	





	

		

			

				
					
ModalLayer模态框插件js弹出框

				
			

			

				

					06-11
				

			

		

		

			
				
 - **非模态框（Non-Modal）**: 非模态框允许用户在对话框打开的同时继续与页面其他部分互动。  - **js弹出框**: 使用JavaScript实现的弹出窗口，可以动态创建和控制。  2. **ModalLayer特点**  - **多样化形式**: ...

			
		

	





	

		

			

				
					
BootStrap点击保存后实现模态框自动关闭的思路(模态框)

				
			

			

				

					08-29
				

			

		

		

			
				
对于需要在保存操作完成后关闭模态框的情况，可以结合JavaScript进行处理。无论是在前端还是后端验证通过后，都可以调用`.modal("hide")`方法来关闭模态框。这样，我们可以为用户提供更顺畅的交互体验，同时保持代码...

			
		

	





	

		

			

				
					
可拖拽的非模态窗口（满足在特定区域内）--bootstrap样式

				
			

			

				

					12-12
				

			

		

		

			
				
bootstrap样式的非模态窗口插件，并且设计成在某一区域内可拖拽的，具体的外部可设置参数都在案例中，可以自行参考

			
		

	





	

		

			

				
					
 jq模态非模态对话框插件

				
			

			

				

					pengyaou的博客
				

				

					08-05
					
					207
					
				

			

		

		

			
				


演示地址：http://www.pengyaou.com/LegendsZ/eg/MessageBox.html
源代码：http://www.pengyaou.com/LegendsZ/File/2014/08/05/20140805113048304.html


			
		

	





	

		

			

				
					
JS弹出新窗口(模态、非模态)

				
			

			

				

					李颢-专栏
				

				

					02-21
					
					6493
					
				

			

		

		

			
				
弹出居中新窗口，代码如下：


JS弹出窗口介绍


function OpenWindow(htmUrl)
{
	var url=htmUrl; 	   
	var winName="newWin"; 	  
	var awidth=screen.availWidth/6*2; 		//窗口宽度,需要设置
	var aheight=screen.availHeight/5*2; 		//窗口高

			
		

	





	

		

			

				
					
html弹出非模式窗口,JavaScript模态窗口和非模态窗口（转）

				
			

			

				

					weixin_42349126的博客
				

				

					06-07
					
					891
					
				

			

		

		

			
				
JavaScript中弹出的窗口有模态窗口和非模态窗口。模态窗口就是打开一个子窗口，如果这个子窗口不关闭，就不能操作它的父窗口，原来程序暂停执行，直到这个模态窗口关闭后才回到原来程序继续。非模态的就是直接显示出来，然后原来的程序继续执行下面的语句，而且其他窗口也呈可用状态。 模态窗口独占了用户的输入，当一个模态窗口打开时，用户只能与该窗口进行交互，而其他用户界面对象收不到输入信息。 通常浏览器中w...

			
		

	





	

		

			

				
					
js模态对话框showModalDialog与非模态对话框showModelessDialog

				
			

			

				

					
				

				

					07-16
					
					213
					
				

			

		

		

			
				

在js中要用到弹出框是很常见的事，一般我们只是弹出个警告，提示，用alert就可以了；
如果涉及到输入值，可能要用到confirm，prompt。
但是这还不够，如果弹出的页面需要是一个定制的页面，即弹出y一个html，那怎么办呢？
一般，大家很快想到window.open，是吧？
但是这个函数有个问题，我想让弹出的页面是一个新的窗口，悬浮在原先的页面上。
这个函数是做不到的，现在的...

			
		

	





	

		

			

				
					
操作模态与非模态对话框 

				
			

			

				

					微笑的黄捷
				

				

					07-30
					
					1434
					
				

			

		

		

			
				
JavaScrip高级应用：操作模态与非模态对话框 JavaScrip高级应用：操作模态与非模态对话框 本文出自:http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:41:38) 我们知道，对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标

			
		

	





	

		

			

				
					
通俗讲解模态弹框和非模态弹框

				
			

			

				

					mpp_king的博客
				

				

					04-11
					
					7427
					
				

			

		

		

			
				
原文地址：点击打开链接弹框是一种重要的交互方式，主要用于完成信息传递和用户反馈两大功能。弹框很常见，但并不见的每一个设计师都可以100%的弄明白弹框这个概念。这篇文章是对弹框体系的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。　　　　我们日常所说的弹框是一个很笼统的概念。所有的对话框，浮层，提示条我们都习惯性的称之为弹框，其实弹框我们可以分为两种：模态弹框和非模态弹框。　　模态弹框　　模态弹...

			
		

	





	

		

			

				
					
模态和非模态的区别

				
			

			

				

					kevinlifeng的专栏
				

				

					03-17
					
					4363
					
				

			

		

		

			
				
模态窗口就是在该窗口关闭之前，其父窗口不可能成为活动窗口的那种窗口。举个例子：   
       窗口A弹出窗口B,如果窗口B是模态的，在窗口B关闭前就不可能切换到窗口A;如果B是非模态的，那可以在这两个窗口之间任意切换。


       它一般用来显示提示信息和接受用户的输入。对话框不能独立存在。目前有两种对话框，分别为：模态对话框 和 非模态对话框。
模态对话框在显示之后，就不能

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值