网页弹出式窗口的制作方法

后勤部长 · 发表于 2011-2-14 21:27

在flash网站建设中，在需要使用html页面的情况是经常会有的。比如在有动态内容而你又不想将其加入到flash的时候（因为此时可能会很麻烦）,再有就当文字内容很多的情况的下，最好的解决方法也是使用弹出窗口，如果使用在flash中制作，相信多少会影响到flsah的效果表现。    终上所述，使用flash弹出居中窗口，是很必要的，也是创建flash站点必须要会一种小的技术。它实际上是和javascript结合使用的一门技术。我们要做的就是将它居中显示在浏览的中央，并将浏览器的一些不必要的元素去除，所有这些做法都是为了一点，让我们整站看上去更美观，更舒服。下面就一步一步的开始：

      第一步
   在flash中，创建一个按钮，在属性面板中给它起一个实例名为btn_Up.将下面的代码粘在你的主时间的第一帧上。保存你的文件，我这里命名是main.fla

代码:

btn_Up.onRelease = function() {
getURL("javascript:Launch('http://www.cnwebshow.com', 400, 300)");
};

复制代码

第二步

发布影片，方法是文件菜单→发布,当你发布完成后，在你所发布的文件路径处就会看到有三个文件，一个是fla文件。就是刚刚我们所创建的，第二个是发布后生成的html文件，第三个是必不可少的swf文件，fla文件是不需要上传的。

第三步

找到我们发布好的html文件，名为main.html ，用dreamweaver或是记事本打开，进行编辑，目的是要加入一段javascript函数，这段代码是flash中需要调用的，将下面这段代码加在html中<body>标签之前。

代码:

<script language="JavaScript">
function Launch(page, width, height) {
OpenWin = this.open(page, "webstudio", "toolbar=no, menubar=no ,location=no, scrollbars=yes, resizable=yes, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + """);
}
</script>

复制代码

保存main.html，在浏览器中打开，点击后，你会发现现在已经能弹出一个居中窗口了。

需要注意的地方：

如果你对flash进行修改，并且重新发布了影片，则你可能需要重新将javascript代码粘一次，所以建议这么做：一旦你在html中加好了javascript代码，再修改flash时，建议使用导出影片命令或者Shift+回车，直接盖掉原先的swf文件。这样我们就不用总是去编辑html中的代码了。

首先先让我们看一下在flash中的加在按钮上链接结构:
javascript

aunch('<页面地址>', width, height)
在这段代码中，<页面地址>我设定的是本人主页的地址，你可以替换成你想要指定的页面，width和height是用来指定当前的窗口的大小。

例如，如果你想要你的弹出窗口指向google，打开一个500*400的窗口，那么你的代码就应是这样：
GetURL(“javascript:Launch('http://www.google.com', 500, 400)”)
对于上面的链接代码，你可以编辑页面地址，也可以任意的修改宽和高。其它针对窗口的定义需要在html中我们粘过的javascript代码进行编辑。

在html中的javascrpt中弹出一个窗口的基本代码结构是这样的:
this.open('<页面地址>', "window ID", "properties")
<页面地址>参数只是告诉窗口有那个地址要显示，”window ID”参数是对你的新窗口的一个引用。

例如，你让你的flash动画载入一个新的URL,并且在刚才打开的窗口中显示，这时你就可将getURL的目标写成这个新窗口的window ID..这个名称在命名时没有太多的限制。

属性参数决定你的滚动条是否显示出来，还有地址，状态栏等，都要在这里指定，在你的代码里，我们差不多都用到了。如下是一些属性的设置，设为yes是显示，设为no是不显示。

·toolbar (yes/no) 工具栏
·menubar (yes/no) 菜单栏
·location (yes/no) 地址栏
·scrollbar (yes/no) 滚动条
·resizable (yes/no) 是否可以缩放这个窗口
·width (number) 宽
·height (number) 高
·top (number) 顶端
·left (number) 左

复制代码

注意：针对于上面的javascript代码，宽，高，顶，左等属性，你最好不要改变它，因为我们是在flash的代码中对它进行了控制，否则可能达不到你预期的效果，对于其它的属性你可修改。

zaneliusha · 发表于 2013-5-9 10:42

好东西，收藏，以后看

[技巧] 网页弹出式窗口的制作方法

评分

浏览过的版块

灌水勋章