利用javascript打开模态对话框(示例代码)


Posted in Javascript onJanuary 11, 2014

1. 标准的方法

<script type="text/javascript">   
function openWin(src, width, height, showScroll){   
window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+";scroll:"+showScroll+";");   
}   
</script> 

例:<span style="CURSOR: pointer" onclick="openWin 
('https://3water.com', '500px', '400px', 'no')">点击</span> 

2. 要注意的是,Firefox并不支持该功能,它支持的语法是

window.open 
('openwin.html','newWin', 'modal=yes, width=200,height=200,resizable=no, scrollbars=no' ); 

3. 如何自动判断浏览器

<input type="button" value="打开对话框" onclick="showDialog('#')"/>  
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
  function   showDialog(url)  
  {  
   if(   document.all   ) //IE  
   {  
   feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no";  
   window.showModalDialog(url,null,feature);  
   }  
   else  
   {  
     //modelessDialog可以将modal换成dialog=yes  
   feature ="width=300,height=200,menubar=no,toolbar=no,location=no,";  
   feature+="scrollbars=no,status=no,modal=yes";    
   window.open(url,null,feature);  
   }  
  }  
  //-->  
</SCRIPT>

4. 在IE中,模态对话框会隐藏地址栏,而在其他浏览器则不一定

利用javascript打开模态对话框(示例代码)

利用javascript打开模态对话框(示例代码)

【注意】在谷歌浏览器中,这个模态的效果也会失效。

5. 一般在弹出对话框的时候,我们都希望整个父页面的背景变为一个半透明的颜色,让用户看到后面是不可以访问的

利用javascript打开模态对话框(示例代码)

而关闭对话框之后又希望还原

利用javascript打开模态对话框(示例代码)

这是怎么做到的呢?

        ///显示某个订单的详细信息,通过一个模态对话框,而且屏幕会变颜色
        function ShowOrderDetails(orderId) {
            var url = "details.aspx?orderID=" + orderId; 
//            $("body").css("filter", "Alpha(Opacity=20)");
            //filter:Alpha(Opacity=50) 
            $("body").addClass("body1"); 
            ShowDetailsDialog(url, "600px", "400px", "yes"); 
            $("body").removeClass("body1");
        }

另外,有一个样式表定义
.body1
{
    background-color:#999999;
    filter:Alpha(Opacity=40);
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
    .body1{
        background-color:#999999;
        filter:Alpha(Opacity=40);
    }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowDetailsDialog(src, width, height, showScroll) {
            window.showModalDialog(src, "", "location:No;status:No;help:NO;dialogWidth:" + width + ";dialogHeight:" + height + ";scroll" + showScroll + ";");
        }
        function ShowOrderDetails(orderId) {
            var url = 'Details.aspx?orderID=' + orderId;
            $("body").addClass("body1");
            ShowDetailsDialog(url, '500px', '400px', 'no');
            $("body").removeClass("body1");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <span style="cursor:pointer" onclick="ShowOrderDetails(11)" >点击</span>
    </div>
    </form>
</body>
</html>
Javascript 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
js分页代码分享
Apr 28 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
浅析Jquery操作select
Dec 13 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 #Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 #Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 #Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 #Javascript
javascript遍历控件实例详细解析
Jan 10 #Javascript
关闭ie窗口清除Session的解决方法
Jan 10 #Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
浅析php单例模式
2014/11/25 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
javascript回调函数详解
2018/02/06 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
tensorflow如何批量读取图片
2019/08/29 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
电气自动化大学生求职信
2013/10/16 职场文书
元旦促销方案
2014/03/15 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
表扬通报怎么写
2015/01/16 职场文书
世界气象日活动总结
2015/02/27 职场文书
离婚起诉书范本
2015/05/18 职场文书
校运会宣传稿大全
2015/07/23 职场文书