利用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求平均值的小例子
Nov 29 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 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 一个页面执行时间类代码
2010/03/05 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Ajax请求总共有多少种Callback
2016/07/17 面试题
保护母亲河倡议书
2014/04/14 职场文书
德育标兵事迹材料
2014/08/24 职场文书