利用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的链式调用之each函数
Dec 03 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php自定义session示例分享
2014/04/22 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
PHP实现简单登录界面
2019/10/23 PHP
js中复制行和删除行的操作实例
2013/06/25 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python递归实现快速排序
2018/08/18 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
报考公务员诚信承诺书
2014/08/29 职场文书
企业整改报告范文
2014/11/08 职场文书
周年庆典答谢词
2015/01/20 职场文书
信用卡收入证明范本
2015/06/12 职场文书
教学反思怎么写
2016/02/24 职场文书
Node.js实现断点续传
2021/06/23 Javascript
Python操作CSV格式文件的方法大全
2021/07/15 Python
用Python可视化新冠疫情数据
2022/01/18 Python