利用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 EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
Vue实现购物车实例代码两则
May 30 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函数(简单整理)
2010/04/30 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP设置进度条的方法
2015/07/08 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
纯JS实现轮播图
2017/02/22 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
查看django版本的方法分享
2018/05/14 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
详解Python模块化编程与装饰器
2021/01/16 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
小学感恩教育活动总结
2014/07/07 职场文书
学校计划生育责任书
2015/05/09 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript