利用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中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
JS返回顶部实例代码
Aug 09 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 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文件的实现方法
2007/03/19 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
百度地图API使用方法详解
2015/08/25 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
JS获取url链接字符串 location.href
2013/12/23 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
github配置使用指南
2014/11/18 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python正则表达式面试题解答
2020/04/28 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
django rest framework使用django-filter用法
2020/07/15 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
最新pycharm安装教程
2020/11/18 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
教师辞职报告范文
2014/01/20 职场文书
工作态度检讨书
2014/02/11 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
Python语言中的数据类型-序列
2022/02/24 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android