利用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 相关文章推荐
对js关键字命名的疑问介绍
Apr 25 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP合并静态文件详解
2014/11/14 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
深入理解vue Render函数
2017/07/19 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
详解微信UnionID作用
2019/05/15 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解python进行mp3格式判断
2016/12/23 Python
python实现字符串和字典的转换
2018/09/29 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
农村文化活动总结
2014/08/28 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
大学推普周活动总结
2015/05/07 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书