html点击按钮弹出悬浮窗_JS设置弹出小窗口。-程序员宅基地

技术标签: html点击按钮弹出悬浮窗  

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。

1、最基本的弹出窗口代码

其实代码非常简单:

是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

window.open ("page.html") 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。

用单引号和双引号都可以,只是不要混用。

这一段代码可以加入HTML的任意位置,

和之间可以,间也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。 也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。

2、经过设置后的弹出窗口

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。

参数解释:

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为允许;

js脚本结束

3、用函数控制弹出窗口

下面是一个完整的代码:

...任意的页面内容...

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

怎么调用呢?

方法一:

浏览器读页面时弹出窗口;

方法二:

浏览器离开页面时弹出窗口;

方法三:用一个连接调用:打开一个窗口

注意:使用的"#"是虚连接。

方法四:用一个按钮调用:

4、同时弹出2个窗口

对源代码稍微改动一下:

为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。

注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?

5、主窗口打开文件1.htm,同时弹出小窗口page.html

如下代码加入主窗口

区:

加入

区:

open即可

6、弹出的窗口之定时关闭控制

下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?

首先,将如下代码加入page.html文件的

区:

function closeit() {

setTimeout("self.close()",10000) //毫秒

}

然后,再用

这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

7、在弹出窗口中加上一个关闭按钮

呵呵,现在更加完美了!

8、内包含的弹出窗口---一个页面两个窗口

上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。

function openwin()

{

OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");

//写成一行

OpenWindow.document.write("

例子")

OpenWindow.document.write("

")

OpenWindow.document.write("

Hello!

")

OpenWindow.document.write("New window opened!")

OpenWindow.document.write("")

OpenWindow.document.write("")

OpenWindow.document.close()

}

打开一个窗口

看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

9、终极应用--弹出的窗口之Cookie控制

回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(

有解决的办法吗?当然有!我们使用cookie来控制一下就可以了。首先,将如下代码加入主页面HTML的

区:

function openwin(){

window.open("page.html","","width=200,height=200")

}

function get_cookie(Name) {

var search = Name + "=" var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1)

end = document.cookie.length;

returnvalue=(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function loadpopup(){

if (get_cookie("popped")=="){

openwin()

document.cookie="popped=yes"

}

}

然后,用

(注意不是openwin而是loadpop啊!)替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

需要注意的是,JS脚本中的的大小写最好前后保持一致。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39873741/article/details/113567927

智能推荐

施耐德m340设置ip后忘记ip,怎么恢复ip_m340初始ip-程序员宅基地

文章浏览阅读9.2k次。这件事要从那一天说起,同事的M340一个月之前设置的ip,等在想使用地址的时候忘了,后来问我,大部分的反应就是使用编程线连接并且把施耐德M340上的程序上载下来,然后更改ip在下载进去,当然那是保留程序的方法,不保存程序就直接使用编程线下载空程序改个ip就可以,但当时没有编程线并且没有时间买,你又很着急那怎么办?下面就是本章重点内容,使用拨码方式恢复ip地址1、把网卡模块拆下下来,在下方又..._m340初始ip

建设银行房贷没扣成功会补扣吗?_建设银行房贷扣款失败会再次扣款吗-程序员宅基地

文章浏览阅读391次。建设银行房贷没扣成功,系统会再次发起补扣,用户需要在补扣之前,将还款的金额存入银行卡中,等待系统完成补扣。另外,用户只要在还款日当天完成扣款,系统就会视为用户按时还款,用户按时还款有利于维护个人信用。房贷如果逾期,那么逾期记录会上传都征信中,逾期情况较为严重时,建设银行可能会拍卖房产用于还款。..._建设银行房贷扣款失败会再次扣款吗

ROS学习笔记(五)ROS 键盘按键读取模块_ros获取键盘输入-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏14次。#ifndef KEY_H#define KEY_H#include <stdio.h>#include <termios.h>#include <unistd.h>#include <iostream>class Keyboard_ctrl { struct termios initial_settings, new_settings; int peek_character = -1; public: Keyboard_ctr._ros获取键盘输入

微信小程序英文版:实现一键切换中英双语版(已组件化)_海外版小程序翻译组件-程序员宅基地

文章浏览阅读6.7k次,点赞2次,收藏44次。第一步,找个地方新建中英文两个字典,我是放在util下面字典内容如下en.jslet en = { text1: 'text1', text2: 'text2', text3:'text3', text4:'text4',}module.exports = { content: en}zh.jslet zh = { text1: '文本1', text2: '文本2', text3:'文本3', text4:'文本4',}module.expor_海外版小程序翻译组件

springboot2.2.X手册:放弃fastdfs,整合Minio做文件服务器真香_fastdfs替代品-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏16次。溪云阁:专注编程教学,架构,JAVA,Python,微服务,机器学习等,欢迎关注获取源码,篇幅较长,建议先收藏。目录什么是Minio为什么选择Minio整合Minio属性类配置类配置文件接口类测试上一篇:springboot2.2.X手册:防抓包?快速实现API接口数据加密什么是MinioMinio是Apcche旗下的一款开源的轻量级文件服务器,基于对象存储,协议是基于Apache License v2.0,开源可用于商务。Minio主要用来.._fastdfs替代品

session基本知识_session 下标得最大长度-程序员宅基地

文章浏览阅读217次。session什么是session在web中,session被称为“会话”。它是保存在服务器上用来跟踪并记录用户信息的数据。session的机制session是一种服务器端的机制,用来跟踪会话并记录信息。当第一次访问服务器时,服务器自动生成了一个Session ID来唯一标识这个客户端,并通过响应以cookie的形式发送并保存到客户端上;第二次客户端访问时,会将前一次服务器响应中的c..._session 下标得最大长度

随便推点

Spring核心原理-程序员宅基地

文章浏览阅读521次。spring源码学习_spring核心原理

编码问题引发的文件操作错误和SQL宽字节注入_addslashes函数转义宽字符注入失败-程序员宅基地

文章浏览阅读388次。人过留名,雁过留声人生天地间,凡有大动静者必有猪头前言有时候由于文件的编码,代码的编码设置或浏览器网页的编码设置不一致往往就会造成一些问题困扰,常见的有文件或者网页上出现中文乱码,文件的导入失败等等。如果放置在网站的开发中,有时候就会因为编码的设置问题导致网页中存在 SQL 宽字节注入漏洞,危害极大。1. 文件操作① 中文乱码用 sublime 打开一个 PHP 文件时中文出现..._addslashes函数转义宽字符注入失败

ArcGIS栅格数据SetNull IsNull Con函数_arcgis isnull函数与栅格相交的栅格-程序员宅基地

文章浏览阅读4.3k次,点赞2次,收藏8次。当两个栅格进行叠加,有时会有一部分没有数据,即用identify点击该区域,Value为NoData,而不是像其他非空区域一样有值。如果不进行处理的话,nodata数据跟其他图层做运算是会变为nodata。所以nodata区域要赋予0值,因为nodata任何数=nodata,因此当需要对栅格空值数据赋值时,要采用条件查询函数将NoData的地方进行赋值。以下以arcgis10.0为例:(1..._arcgis isnull函数与栅格相交的栅格

idea的server控制台打印日志中文乱码_idea在server窗口上打印乱码问题-程序员宅基地

文章浏览阅读6.4k次。如下图,idea的server控制台日志乱码:解决方法:在tomcat的启动设置项:VM options中加上 -Dfile.encoding=UTF-8 重启就可以了_idea在server窗口上打印乱码问题

Android中webview加载HTML界面方法与使用和解析一些HTML字符样式富文本展示图片_webview解析html标签-程序员宅基地

文章浏览阅读1.9k次。Android中webview加载HTML界面方法与使用和解析一些HTML富文本展示,图片溢出解决方法等一、WebViewWebView加载html数据是Android前端比较常用的方法了二、使用步骤代码展示添加网络权限。<uses-permission android:name="android.permission.INTERNET" />那个WebView 要加载HTML语句绑定使用。 WebView webview = findViewById(R.id.web_webview解析html标签

爬虫(一)基础知识(python)_openresty判断百度蜘蛛访问-程序员宅基地

文章浏览阅读211次。定义网络爬虫,也叫网络蜘蛛(Web Spider),如果把互联网比喻成一个蜘蛛网,Spider就是一只在网上爬来爬去的蜘蛛。网络爬虫就是根据网页的地址来寻找网页的,也就是URL。举一个简单的例子,我们在浏览器的地址栏中输入的字符串就是URL,例如:https://www.baidu.com/URL就是同意资源定位符(Uniform Resource Locator),它的一般格式如下(带方括..._openresty判断百度蜘蛛访问