利用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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
RequireJS用法简单示例
Aug 20 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
react MPA 多页配置详解
Oct 18 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框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JS常见算法详解
2017/02/28 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
详解python的数字类型变量与其方法
2016/11/20 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python实现元素等待代码实例
2019/11/11 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
团日活动策划书
2014/02/01 职场文书
安全生产标语
2014/06/06 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS