可关闭的浮动div示例

页面效果

示例（黄色框）为可以关闭的浮动div

可以在里面添加<span>, <button>等，灵活实现想要的效果

源码

<html><head><title>可移动、可关闭的div浮动层</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><style>#postit {position: absolute;width: 250;padding: 5px;background-color:rgba(210,200,0,0.2); /*透明度*/border: 1px solid black;visibility: hidden;z-index: 100;cursor: hand;}</style><div id="postit" style="left:150px;top:150px;"><div align="right"><b><a href="javascript:closeit()">[关闭]</a></b></div><b>CsrCode.Cn：</b></div><script>//Post-it only once per browser session? (0=no, 1=yes)//Specifying 0 will cause postit to display every time page is loadedvar once_per_browser = 0///No need to edit beyond here///var ns4 = document.layersvar ie4 = document.allvar ns6 = document.getElementById && !document.allif (ns4)crossobj = document.layers.postitelse if (ie4 || ns6)crossobj = ns6 ? document.getElementById("postit") : document.all.postitfunction closeit() {if (ie4 || ns6)crossobj.style.visibility = "hidden"else if (ns4)crossobj.visibility = "hide"}function showornot() {if (get_cookie4('postdisplay') == '') {showit()document.cookie4 = "postdisplay=yes"}}function showit() {if (ie4 || ns6)crossobj.style.visibility = "visible"else if (ns4)crossobj.visibility = "show"}if (once_per_browser)showornot()elseshowit()</script></body>
</html>

可关闭的浮动div示例相关推荐

position:fixed和scroll实现div浮动【示例】
原文:position:fixed和scroll实现div浮动[示例] 前言在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解 ...
浮动div 内部元素垂直居中
浮动div 内部元素垂直居中在内部放个div 2,要居中元素放进去 div 2{ height: 50px; line-height: 50px; display: table-cell; ve ...
android浮动按钮_Android浮动操作按钮示例教程
android浮动按钮 Today we will learn about Android Floating Action Button. We'll discuss the FloatingActi ...
php++网页最右下角,js实现右下角可关闭最小化div(可用于展示推荐内容)
本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm 效果图片: ...
Oracle RAC 启动与关闭（rac 命令示例）
一. 检查共享设备一般情况下, 存放OCR 和 Voting Disk 的OCFS2 或者raw 都是自动启动的. 如果他们没有启动,RAC 肯定是启动不了的. 1.1 如果使用ocfs2的,检查o ...
浮动div，回到顶部
<div style="height: 5000px">这是顶部</div> <div id="FloatDIV" style=& ...
浮动div中的图片垂直居中
table-cell方法垂直水平居中 <!DOCTYPE html> <html> <head> <meta name="description&q ...
css将空的div撑开,如何使用css将空的浮动div伸展到可用的全高度？
我能想出是对.left-sidebar元素上使用position: absolute最好的: .page { position: relative; /* causes the left-sideba ...
html div右下浮动,div 初始化及左右浮动
HC-MUI 基础样式在初始化时将div进行了居中处理hcmui.css 内置样式: div{overflow:hidden; margin:0 auto;} 所有div 的样式均使用了 margin ...

可关闭的浮动div示例

页面效果

源码

可关闭的浮动div示例相关推荐

最新文章

热门文章