利用javascript打开模态对话框(示例代码)

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 
('http://www.jb51.net', '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中，模态对话框会隐藏地址栏，而在其他浏览器则不一定

【注意】在谷歌浏览器中，这个模态的效果也会失效。

5. 一般在弹出对话框的时候，我们都希望整个父页面的背景变为一个半透明的颜色，让用户看到后面是不可以访问的

而关闭对话框之后又希望还原

这是怎么做到的呢？


代码如下:

///显示某个订单的详细信息，通过一个模态对话框，而且屏幕会变颜色
        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>

赞 (0)

相关推荐

  • javascript showModalDialog模态对话框使用说明

    javascript showModalDialog模态对话框使用说明

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&

  • ExtJS Ext.MessageBox.alert()弹出对话框详解

    ExtJS Ext.MessageBox.alert()弹出对话框详解

    复制代码 代码如下: Ext.onReady(function() { Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的 }); 效果图: 复制代码 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { title:'提示', msg: 'JSON配置方式,简单吧' } Ext.Msg.show(config); }); 效果图: 上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识

  • Extjs Ext.MessageBox.confirm 确认对话框详解

    Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮"是"和"否"如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中. 调用格式: confirm(String title,String msg,[function fn],[Object scope]) 参数说明: Ext.MessageBox.

  • JavaScript弹出对话框的三种方式

    JavaScript弹出对话框的三种方式

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行

  • js+html5生成自动排列对话框实例

    js+html5生成自动排列对话框实例

    最近用js和html5写出的弹出多个对话框,并且可以自动排列,占满屏幕时会自动从新开始,话不多说直接上图: 用起来还是十分方便的,如果你感兴趣,代码在后面 首先是Html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body styl

  • javascript window.confirm确认 取消对话框实现代码小结

    confirm() 方法 confirm() 方法用于显示一个带有指定消息和确定及取消按钮的对话框. 说明:如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false 一种: 复制代码 代码如下: <a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.baidu.com'">弹出窗口</a> 二种: 复制代码 代码如下: &

  • javascript 选择文件夹对话框(web)

    javascript 选择文件夹对话框(web)

    没有办法,实践证明最好的解决办法是自己写一个OCX控件,这样就只要注册一下OCX控件就可以了,同时OCX控件的可扩展性非常大,也就是给vc\delphi这些程序的功能引入到web中,其功能可想而知! 这里不说明OCX开发的过程了,给自己写的OCX控件共享一下,希望能给一些朋友提供帮助. 这个OCX控件中提供了一个getFiles()方法,只要获取控件对象,然后调用getFiles()方法就可以获取对应路径下的所有文件,如下图: 该控件可以选择任意盘符下的任意文件夹,图中最下面的按钮时web中的i

  • JavaScript写的一个自定义弹出式对话框代码

    JavaScript写的一个自定义弹出式对话框代码

    下图是我的设计思路 下面是具体的js代码 1,首先定义几个自定义函数 代码 复制代码 代码如下: //判断是否为数组 function isArray(v) { return v && typeof v.length == 'number' && typeof v.splice == 'function'; } //创建元素 function createEle(tagName) { return document.createElement(tagName); } //在

  • 九种js弹出对话框的方法总结

    [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: 复制代码 代码如下: <script LANGUAGE="javascript"> <!-- window.open ("page.html") --> </script> 因为这是一段javascripts代码,所以它们应该放在<script LANGUAGE="javascript">标签和</s

  • js弹出确认是否删除对话框

    复制代码 代码如下: <!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> <meta http-equiv=&qu

随机推荐