使用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" οnclick="openWin 
(’http://www.deepteach.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="打开对话框" οnclick="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);
}

 

 

ExpandedBlockStart.gif代码
<%@ 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>

 

 

转载于:https://www.cnblogs.com/jhxk/articles/1760917.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nagios监控系统搭建!!

http://kerry.blog.51cto.com/172631/107831/转载于:https://www.cnblogs.com/iLumia/p/4237640.html

Go-select和switch的使用区别

Go-select和switch的使用区别 1 package main2 3 import (4 "fmt"5 "time"6 )7 8 func main() {9 i : 2 10 fmt.Print("Write ", i, " as ") //Write 2 as two 11 switch i { 12 case 1: 13 fmt.Prin…

java 终结此段代码并重新运行_Java垃圾回收

好久没看关于java的书了, 最近, 看了James Gosling的<>, 做了一些读书笔记. 这部分是关于垃圾回收的.1.垃圾回收对象是使用new创建的, 但是并没有与之相对应的delete操作来回收对象占用的内存. 当我们完成对某个对象的使用时, 只需停止该对象的引用:->将引用改变为指向…

Enumerable#zip特性

看到文章Zip operator in Linq with .NET 4.0&#xff0c; Enumerable#zip是Ruby 1.8开始出现的特性&#xff0c;.NET 4/Silverlight 4也有这样的特性。与 Ruby 类似&#xff0c;Enumerable 同样关注你的感受&#xff0c;它为一些行为提供了多个名称。这主要是为了降低学习难度…

-bash: ulimit: pipe size: cannot modify limit: Invalid argument

从root账号切换到oracle账号时&#xff0c;出现了“-bash: ulimit: pipe size: cannot modify limit: Invalid argument”提示&#xff0c;一般出现这个错误是因为在设置.bash_profile时&#xff0c;没有注意空格的缘故造成。例如&#xff08;注意红色部分&#xff09; 例1&…

linux 安装nginx php mysql 配置文件在哪_linux下 php+nginx+mysql安装配置

我主要是用来安装php&#xff0c;以及nginx和php的交互。一 安装插件可以选择YUM安装或者源码编译安装gccgcc-czlibpcrepcre-devellibeventlibevent-devellibxml2libxml2-devellibmcryptlibmcrypt-develcurl-devellibpng-devellibtool-ltdl-develgd-developensslopenssl-develn…

项目开发经验谈之:设计失败的挫败感

项目经验谈之&#xff1a;设计失败的挫败感--老资格给你的压力 前言&#xff1a;最近一段时间似乎感触特别的多&#xff0c;心情也特复杂的。也许你曾经有过同样的际遇&#xff0c;也许没有&#xff0c;但是我的目的只有一个&#xff1a;分享&#xff0c;勉励&#xff01; 系列…

JDBC原理之层次结构

目录 JDBC的层次结构前言Collection角色Statement角色ResultSet角色JDBC工作的基本流程JDBC的层次结构 前言 JDBC API提供了以下接口和类&#xff1a; DriverManager: 这个类管理数据库驱动程序的列表。确定内容是否符合从Java应用程序使用的通信子协议正确的数据库驱动程序的连…

Java异常处理机制很有意思

版权声明&#xff1a;欢迎转载&#xff0c;请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/43015379 前言&#xff1a;在网络上看到一篇《深入理解Java异常处理机制》&#xff0c;看完感觉自己也有一点小想法&#xff0c;的确在很多Java学者的眼里&…

你如何去管理你的团队?

一下是我自己也不知道如何去回答的问题&#xff0c;或者只是想着这么解决&#xff0c;写在这里&#xff0c;那一天等我知道答案了再来给自己解答和完善。 作为一个团队负责人&#xff0c;你如何去管理的你团队&#xff0c;你怎么样来做开始启动你的团队&#xff0c;计划&#x…

2019-5-30-websocket下readyState常量

0 (CONNECTING) 正在链接中1 (OPEN) 已经链接并且可以通讯2 (CLOSING) 连接正在关闭3 (CLOSED) 连接已关闭或者没有链接成功转载于:https://www.cnblogs.com/zhangjiajun9404/p/10947697.html

Java自动注入默认_java – 自动注入与Spring

更新&#xff1a;2016年2月自动装配将在Spring Framework 4.3中正式支持。实现可以在这个GitHub commit看到。你不能自动安装的最终原因是Spring的DefaultListableBeanFactory.findAutowireCandidates(String&#xff0c;Class&#xff0c;DependencyDescriptor)方法的实现明确…

摘要

《秦前历史》13章 姜子牙 有一天&#xff0c;武王姬发问姜子牙&#xff1a;“我打算减轻刑罚而又能 树立我的权威&#xff0c;少施行一些赏赐而又能使人们从善&#xff0c;少颁布一些政令法规而民众又都能自觉按一定的规范行事。请问师尚父&#xff0c;怎样做才能实现这一点呢&…

关于ole

在word文档里&#xff0c;当插入一个图片或是电子表格&#xff0c;从而生成一个复合文档&#xff0c;这其中用到ole规范OLE文档&#xff1a;完善了早期的混合文档功能&#xff0c;不仅支持简单链接和嵌入&#xff0c;还支持在位激活、拖放等功能有一片文章你可以看看OLE概述 OL…

Uva489

Hangman Judge UVA - 489 In “Hangman Judge,” you are to write a program that judges a series of Hangman games. For each game, the answer to the puzzle is given as well as the guesses. Rules are the same as the classic game of hangman, and are given as f…

HTML5实现刮奖效果

原文:HTML5实现刮奖效果要实现刮奖效果&#xff0c;最重要的是要找到一种方法&#xff1a;当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation&#xff0c;这个属性有多个值&#xff0c;而实现刮奖效果要用到的值就是destination…

Java多线程复习_Java多线程复习

一、线程的基本概念简单的说&#xff1a;线程就是一个程序里不同的执行路径在同一个时间点上cpu只会有一个线程在执行Java里的多线程是通过java.lang.Thread类来实现的每个线程都拥有自己独立的方法栈空间二、java线程的创建和启动第一种定义线程类实现Runnable接口Thread myTh…

HTML段落自动换行的样式设置

在HTML的P标记中&#xff0c;默认情况下是自动换行的。 如果你的段落是由中文字符或者英文单词组成的&#xff0c;这基本没什么问题。但是如果你的段落是由不间断的英文字母&#xff08;浏览器会认为是一个单词&#xff09;组成&#xff0c;则默认情况下不会换行&#xff0c;将…

DES加密/解密

1 /// <summary>2 /// DES加密(数据加密标准&#xff0c;速度较快&#xff0c;适用于加密大量数据的场合)3 /// </summary>4 /// <param name"EncryptString">待加密的密文</param>5 /// <param name&qu…

Spring中使用Spark连接的DataSource

在Spring中配置Spark hive-thriftserver的连接DataSource与配置其他数据源连接方式是一样的&#xff0c;如一般Oracle数据源配置&#xff0c;使用如下必须的Jar包&#xff1a;使用JDBC程序示例&#xff1a;package com.hadoop.test;import java.sql.Connection; import java.sq…