html5点击关闭网页代码(html关闭页面代码)
admin 发布:2022-12-19 17:57 186
今天给各位分享html5点击关闭网页代码的知识,其中也会对html关闭页面代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、html5弹出提示框,俩个选项,可以跳转的代码多少?
- 2、在HTML5中window.close是关闭当前窗口 退出整个浏览器怎么做
- 3、html5怎么实现定时关闭自身页面
- 4、html5怎么窗口化
- 5、html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框
- 6、html5点击文字从右侧滑出层的代码
html5弹出提示框,俩个选项,可以跳转的代码多少?
if(like==true)
document.write("谢谢你的夸奖");//确定进入
else
window.close();//放弃进入
用脚本关闭窗口,这是IE允许的事情,但其他浏览器默认状态下未必允许。
在HTML5中window.close是关闭当前窗口 退出整个浏览器怎么做
只能做到关闭标签吧,由于各种浏览器设置不一样,但是大部分都是空白标签也不会退出浏览器,所以JS还是没有办法关闭程序。(毕竟浏览器算是应用程序范围,不是HTML部分了)
html5怎么实现定时关闭自身页面
要用js 比如要3秒后关闭
script
setTimeout(function(){
window.close()}
, 3000 );
/script
html5怎么窗口化
弹出窗口总结收集(续)
Asp教程-ASP应用
this.Response.Write("Scriptwindow.open('WebForm7.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');/script");
弹出跟你当前的窗口有没有菜单工具栏没有关系,你只要在页面中写一个脚本它就弹出了.比如
a href=# onclick="window.open('xxx.aspx','窗口名称','参数');"xxxxx/a
以下列出一些弹出窗口的参数,你可自行设定,参数之间用逗号分隔
可选。字符串--列出对象表并用逗号分开。每一项都有自己的值,他们将被分开(如:"fullscreen=yes, toolbar=yes")。下面是被支持的各种特性。
channelmode = { yes | no | 1 | 0 } 是否在窗口中显示阶梯模式。默认为no。
directories = { yes | no | 1 | 0 } 是否在窗口中显示各种按钮。默认为yes。
fullscreen = { yes | no | 1 | 0 } 是否用全屏方式显示浏览器。默认为no。使用这一特性时需要非常小心。因为这一属性可能会隐藏浏览器的标题栏和菜单,你必须提供一个按钮或者其他提示来帮助使用者关闭这一浏览窗口。ALT+F4可以关闭窗口。一个全屏窗口必须使用阶梯(channelmode)模式。
height = number 指定窗口的高度,单位是像素。最小值是100。
left = number 指定窗口距左边框的距离,单位是像素。值必须大于或者等于0。
location = { yes | no | 1 | 0 } 指定是否在窗口中显示地址栏。默认为yes。
menubar = { yes | no | 1 | 0 } 指定是否在窗口中显示菜单栏。默认为yes。
resizable = { yes | no | 1 | 0 } 指定是否在窗口中显示可供用户调整大小的句柄。默认为yes。
scrollbars = { yes | no | 1 | 0 } 指定是否在窗口中显示横向或者纵向滚动条。默认为yes。
status = { yes | no | 1 | 0 } 指定是否在窗口中显示状态栏。默认为yes。
titlebar = { yes | no | 1 | 0 } 指定是否在窗口中显示标题栏。在非调用HTML Application或者一个对话框的情况下,这一项将被忽略。默认为yes。
toolbar = { yes | no | 1 | 0 } 指定是否在窗口中显示工具栏,包括如前进、后退、停止等按钮。默认为yes。
top = number 指定窗口顶部的位置,单位是像素。值必须大于或者等于0。
width = number 指定窗口的宽度,单位是像素。最小值是100。
【1、最基本的弹出窗口代码】
SCRIPT LANGUAGE="javascript"
!--
window.open ('page.html')
--
/SCRIPT
因为这是一段javascripts代码,所以它们应该放在SCRIPT LANGUAGE="javascript"标签和/script之间。!-- 和 --是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。这一段代码可以加入HTML的任意位置,head和/head之间可以,body间/body也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
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脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
html
head
script LANGUAGE="JavaScript"
!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行
}
//--
/script
/head
body onload="openwin()"
任意的页面内容...
/body
/html
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?
方法一:body onload="openwin()" 浏览器读页面时弹出窗口;
方法二:body onunload="openwin()" 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
a href="#" onclick="openwin()"打开一个窗口/a
注意:使用的“#”是虚连接。
方法四:用一个按钮调用:
input type="button" onclick="openwin()" value="打开窗口"
【4、同时弹出2个窗口】
对源代码稍微改动一下:
script LANGUAGE="JavaScript"
!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//写成一行
}
//--
/script
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
如下代码加入主窗口head区:
script language="javascript"
!--
function openwin() {
window.open("page.html","","width=200,height=200")
}
//--
/script
加入body区:
a href="1.htm" onclick="openwin()"open/a即可。
【6、弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中,不是主页面中),让它10秒后自动关闭是不是更酷了?
首先,将如下代码加入page.html文件的head区:
script language="JavaScript"
function closeit()
{
setTimeout("self.close()",10000) //毫秒
}
/script
然后儆?lt;body onload="closeit()" 这一句话代替page.html中原有的BODY这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
【7、在弹出窗口中加上一个关闭按钮】
FORM
INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'
/FORM
呵呵,现在更加完美了!
【8、内包含的弹出窗口-一个页面两个窗口】
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。
html
head
SCRIPT LANGUAGE="JavaScript"
function openwin()
{
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("TITLE例子/TITLE")
OpenWindow.document.write("BODY BGCOLOR=#ffffff")
OpenWindow.document.write("h1Hello!/h1")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("/BODY")
OpenWindow.document.write("/HTML")
OpenWindow.document.close()
}
/SCRIPT
/head
body
a href="#" onclick="openwin()"打开一个窗口/a
input type="button" onclick="openwin()" value="打开窗口"
/body
/html
看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
【9、终极应用--弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面HTML的HEAD区:
script
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=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
/script
然后,用body onload="loadpopup()"(注意不是openwin而是loadpop啊!)替换主页面中原有的BODY这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!
html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框
通过jquery的show()和hide()函数联合使用,实现弹出窗口。
一、show()和hide()函数解析:
1、show() 方法显示隐藏的被选元素。
注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似,但是隐藏的元素不会被完全显示(不再影响页面的布局)。
二、设计一个HTML页面,包括一个简单的弹出窗,和一个显示按钮。其中,调用了jquery的以上两个函数。具体代码如下:
三、设计遮罩层的样式,如下:
四、弹出窗口的css样式,代码如下:
五、初始页面如下:
六、点击按钮,查看弹出窗口结果:
七、关闭弹出窗后,打开开发者中心,如下:
html5点击文字从右侧滑出层的代码
单用css应该不太容易,用js吧
script
window.onload = function () {//因为是放在最前面,元素没有加载完成所以要加上window.onload表示加载完成
window.btn = document.getElementById('menubtn');//通过ID来获取菜单打开按钮(文字图片均可实现)
window.menu = document.getElementById('menu');//通过ID来获取菜单主体
btn.addEventListener("click", menuClick);//绑定事件:点击的时候触发函数
};
function menuClick() {
//思路:当现在菜单是关闭的时候点击按钮菜单CSS动画显示,然后添加class “open”,删除class “close”
// 当现在菜单是打开的时候点击按钮菜单CSS动画消失,然后添加class “close”,删除class “open”
if (btn.class === "open") {
menu.classList.add('slide-to-right-and-hide');
menu.classList.remove("open");
menu.classList.add("close");
}
else {
menu.classList.add('slide-to-left-and-show');
menu.classList.remove("close");
menu.classList.add("open");
}
}
/script
style
#menu {
position: fixed; /* 永远悬浮在一个地方 */
top: 0;
opacity: 0;
right: -500px; /* 保证全部都被遮盖 */
width: 500px;
height: 100vh; /* 高度为整个页面高度 */
background: black; /* 方便观察 */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#menubtn {
position: fixed;
top: 0;
right: 0;
height: 10px;
width: 10px;
background: black;
}
@keyframes slide-to-left-and-show {
from {
opacity: 0 !important;
right: -500px !important;
}
to {
opacity: 1 !important;
right: 0px !important;
}
} /* 打开动画 */
.slide-to-left-and-show {
animation-name: slide-to-left-and-show; /* 使用动画 */
opacity: 1 !important;
right: 0px !important;
}
@keyframes slide-to-right-and-hide {
from {
opacity: 1 !important;
right: 0px !important;
}
to {
opacity: 0 !important;
right: -500px !important;
}
} /* 关闭动画 */
.slide-to-right-and-hide {
animation-name: slide-to-right-and-hide; /* 使用动画 */
opacity: 0 !important;
right: -500px !important;
}
/style
div id="menubtn"/div
div id="menu"/div
如果有不懂的可以继续追问哦,纯手打,累死人了代码编辑,求采纳QAQ
关于html5点击关闭网页代码和html关闭页面代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:点击图片切换图片代码(点击图片跳转代码)
- 下一篇:滚动导航代码(滚动页面代码)
相关推荐
- 05-06dz论坛自动回帖代码(discuz自动发帖)[20240506更新]
- 05-06短信攻击代码(短信攻击网站)[20240506更新]
- 05-06c代码库网站(c语言开源代码网站)[20240506更新]
- 05-06源代码高亮输出html(高亮显示代码)[20240506更新]
- 05-06合作伙伴网页代码(合作伙伴网页代码是多少)[20240506更新]
- 05-06gif怎么转代码(如何转为gif)[20240506更新]
- 05-06java图书馆管理系统代码(图书馆管理系统开源代码java)[20240506更新]
- 05-06canny边缘检测matlab代码(基于matlab的边缘检测)[20240506更新]
- 05-05qq木马代码(木马软件下载)[20240505更新]
- 05-05jquery代码点击复制(jquery复制对象及事件)[20240505更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接