利用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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
js的延迟执行问题分析
Jun 23 Javascript
jquery手风琴特效插件
Feb 04 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 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开发入门教程之面向对象
2006/12/05 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
PHP7 新增常量
2021/03/09 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python如何定义接口和抽象类
2020/07/28 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
交通安全责任书范本
2014/07/24 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
运动会800米赞词
2015/07/22 职场文书
优秀大学生申请书
2019/06/24 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL