在多标签浏览器中，当前页面弹出新的小的窗口

最新推荐文章于 2024-09-13 15:46:37 发布

原创最新推荐文章于 2024-09-13 15:46:37 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

Web

3 篇文章

订阅专栏

本文介绍如何在非多标签浏览器中实现弹窗功能，并推荐SubModal插件，该插件支持不同浏览器环境，提供了两种简便的弹窗方法。

在非多标签浏览器重弹出一个小窗口，可以用一下方法：

<SCRIPT LANGUAGE="javascript">  <!--   window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行  -->  </SCRIPT>

参数解释：

<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束

然而，很多人的浏览器，默认设置就是多标签的，上面的方法，就会在新的标签页面产生一个新的窗口，而非在当前页面弹出一个小窗口，那怎么办呢？

可以使用一款极小极其方便的名叫SubModal的插件，使用插件的效果如下：

效果还不错吧，我测试了一下，在IE，Chrome，FireFox浏览器中，都是可以使用。

插件的下载地址：

http://code.google.com/p/submodal/downloads/list

使用方法：

首先在head标签内引用其中的css和javascript文件

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link rel="stylesheet" type="text/css" href="subModal.css" />
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript" src="subModal.js"></script>
<title>Insert title here</title>
</head>

文件引用后，有2中方法可以实现在网页中弹出窗口。

方法1：

使用<button>按钮,调用javascript中的showPopwin()方法

<button onclick="showPopWin('你的弹出窗口.html', 400, 200, null);">show modal window button</button>

方法2：

使用超链接，调用

<a class="submodal-400-100" href="你的弹窗口.html">aaa</a>

在 http://www.cnblogs.com/lzppcc/archive/2008/01/14/1038977.html看到到的这个弹出框很漂亮,但不能通过鼠标拖动弹出的窗口,难免遗憾,便自己写了JS代码,实现了这个功能.

subModal.js

//***********************以下为新增控件的拖曳事件***************************************************

var gMouseMove=false; 
var x,y,z 
//开始拖曳 
function startDrag(obj){ 
if(event.button == 1 || event.button == 0){ 
   x = window.event.clientX; 
   y = window.event.clientY; 
   z = obj.style.zIndex; 
   obj.style.zIndex = 500; 
   obj.setCapture(); //设置属于当前对象的鼠标捕捉 
   gMouseMove=true; 
   } 
} 
//拖动事件,obj为激发当前事件的控件,dragID为等拖曳控件的ID 
var Draging = function Draging(obj,dragID){ 
if( gMouseMove ){ 
   var oldwin; 
   if(dragID == 'undefined' || dragID == ''){ 
    oldwin = obj.parentNode 
   } 
   else{ 
    oldwin = document.getElementById(dragID); 
   } 
    
   oldwin.style.left = pixParse(oldwin.style.left) + window.event.clientX - x; 
   oldwin.style.top =   pixParse(oldwin.style.top) + window.event.clientY - y; 
   x = window.event.clientX; 
   y = window.event.clientY; 
} 
} 
//将象素单位转为数据129px-->129 
function pixParse(str){ 
str = str.replace('px',''); 
return parseInt(str); 
} 
//停止拖动 
function stopDrag(obj){ 
gMouseMove = false; 
obj.style.zIndex = z; //还原Z座标 
obj.releaseCapture(); 

}

initPopUp()方法中增加了三个事件,如下