好看的弹出框

最新推荐文章于 2021-06-02 21:47:23 发布
最新推荐文章于 2021-06-02 21:47:23 发布
阅读量991 收藏
点赞数
分类专栏： 好看的弹出框 文章标签： json php xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cqh520llr/article/details/84518418
版权 


好看的弹出框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层效果</title>
<style type="text/css">
html, body {height:100%;}
body, h2, p {margin:0px;padding:0px; font-size:12px;}
body {font-size:12px; text-align:center; }
.alert_backg {width:100%;height:100%;top:0px;left:0px;position:absolute;background:#000;opacity:0;filter:alpha(opacity:0)}
.alert_frame {width:340px;height:120px;top:50%;left:50%;position:absolute;display:inline;margin:-60px 0 0 -170px;opacity:0;filter:alpha(opacity:0)}
.alert_frame .top_l {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat;}
.alert_frame .top_c {width:330px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-x;}
.alert_frame .top_r {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat -5px 0;}
.alert_frame .con {width:100%;height:110px;float:left;overflow:hidden;}
.alert_frame .con_l {width:5px;height:100%;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-y;}
.alert_frame .con_c {width:330px;height:100%;float:left;overflow:hidden;background:#fff;}
.alert_frame .con_r {width:5px;height:100%;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-y;}
.alert_frame .bot_l {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat 0 -5px;}
.alert_frame .bot_c {width:330px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-x;}
.alert_frame .bot_r {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat -5px -5px;}
.alert_frame .alert_tit {width:328px;height:27px;float:left;color:#000;line-height:27px;border:1px solid #fff;background:url(/jscss/demoimg/201109/alert_tit_bg.jpg) repeat-x;}
.alert_frame .alert_tit h2 {float:left;text-indent:10px;font-size:14px;font-weight:bold;font-family:"\u5FAE\u8F6F\u96C5\u9ED1";}
.alert_frame .alert_tit em {width:8px;height:7px;overflow:hidden;float:right;cursor:pointer;background:url(/jscss/demoimg/201109/gnbimgs.gif) no-repeat;display:inline;margin:10px 10px 0 0;}
.alert_frame .alert_tit em.hove {background:url(/jscss/demoimg/201109/gnbimgs.gif) no-repeat -8px 0;}
.alert_frame .alert_con {width:330px;height:81px;float:left;border-top:1px solid #e5e5e5;}
.size {width:100%;height:45px;text-align:center;line-height:45px;color:#000;}
.but {width:100%;height:22px;text-align:center;line-height:22px;}
.button {width:55px;height:22px;text-align:center;line-height:22px;color:#fff;background:url(/jscss/demoimg/201109/but.jpg) no-repeat;border:none;display:inline;margin:0 8px;cursor:pointer;}
.title {width:800px;height:35px;color:#fff;line-height:35px;font-family:Verdana;font-weight:bold;text-align:left;margin:20px auto 0 auto;font-size:24px;}
.table {width:800px;height:auto;overflow:hidden;margin:0 auto 20px auto;font-size:12px;border-top:1px solid #ddd;border-left:1px solid #ddd;background:#fff;}
.table ul {margin:0px;padding:0px;float:left;list-style-type:none;}
.table li {width:159px;height:30px;float:left;color:#3e3e3e;text-indent:10px;text-align:left;line-height:30px;font-family:Verdana,"微软雅黑";	border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.table li.td {color:#fff;font-size:14px;font-family:"微软雅黑";font-weight:bold;background:#424242;}
.table li.tit {width:479px;}
.table .tr {width:800px;height:30px;float:left;text-indent:10px;text-align:left;line-height:30px;font-size:14px;font-family:Verdana;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.table .tr a {color:#ff6600;text-decoration:none;}
.table .tr a:hover {text-decoration:underline;}
</style>
<script type="text/javascript">
function $(id){
	return typeof id === "string" ? document.getElementById(id) : id;
}
function $$(oParent, elem){
	return (oParent || document).getElementsByTagName(elem);
}
function $$$(oParent, sClass){
	var aElem = $$(oParent, '*');
	var aClass = [];
	var i = 0;
	for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
	return aClass;
}
function Alert(){
	this.initialize.apply(this, arguments);
}
Object.extend = function(destination, source){
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
};
Alert.prototype = {
	initialize : function(obj, frame, onEnd){
		if($(obj)){
			var _this = this;
			this.obj = $(obj);
			this.frame = frame;
			this.oEve(onEnd);
			this.oTitle = this.onEnd.title;
			this.oContent = this.onEnd.content;
			this.iWidth = this.onEnd.width;
			this.iHeight = this.onEnd.height;
			this.iTop = this.onEnd.top;
			this.iLeft = this.onEnd.left;
			this.iFixed = this.onEnd.fixed;
			this.iClose = this.onEnd.close;
			this.obj.onclick = function(){_this.create(),_this.backg();};
			window.onresize = function(){_this.backg();};
		}
	},
	create : function(){
		this.oDiv = document.createElement('div');
		this.oAlert_backg = document.createElement('div');
		this.oAlert_frame = document.createElement('div');
		this.oTop_l = document.createElement('div');
		this.oTop_c = document.createElement('div');
		this.oTop_r = document.createElement('div');
		this.oCon = document.createElement('div');
		this.oCon_l = document.createElement('div');
		this.oCon_c = document.createElement('div');
		this.oCon_r = document.createElement('div');
		this.oBot_l = document.createElement('div');
		this.oBot_c = document.createElement('div');
		this.oBot_r = document.createElement('div');
		this.oDiv.id = this.frame;
		this.oAlert_backg.className = 'alert_backg';
		this.oAlert_frame.className = 'alert_frame';
		this.oTop_l.className = 'top_l';
		this.oTop_c.className = 'top_c';
		this.oTop_r.className = 'top_r';
		this.oCon.className = 'con';
		this.oCon_l.className = 'con_l';
		this.oCon_c.className = 'con_c';
		this.oCon_r.className = 'con_r';
		this.oBot_l.className = 'bot_l';
		this.oBot_c.className = 'bot_c';
		this.oBot_r.className = 'bot_r';
		document.body.appendChild(this.oDiv);
		this.box = $(this.frame);
		this.box.appendChild(this.oAlert_backg);
		this.box.appendChild(this.oAlert_frame);
		this.oFra = $$$(this.box, 'alert_frame')[0];
		this.oFra.appendChild(this.oTop_l);
		this.oFra.appendChild(this.oTop_c);
		this.oFra.appendChild(this.oTop_r);
		this.oFra.appendChild(this.oCon);
		this.oFra.appendChild(this.oBot_l);
		this.oFra.appendChild(this.oBot_c);
		this.oFra.appendChild(this.oBot_r);
		this.oCone = $$$(this.box, 'con')[0];
		this.oCone.appendChild(this.oCon_l);
		this.oCone.appendChild(this.oCon_c);
		this.oCone.appendChild(this.oCon_r);
		this.tit = $(this.frame);
		this.con = $$$(this.tit, 'con_c')[0];
		this.oAlert_tit = document.createElement('div');
		this.oAlert_con = document.createElement('div');
		this.oH2 = document.createElement('h2');
		this.oAlert_tit.className = 'alert_tit';
		this.oAlert_con.className = 'alert_con';
		if(this.oTitle != ""){
			this.con.appendChild(this.oAlert_tit);
			this.con.appendChild(this.oAlert_con);
			this.oAlert_tit = $$$(this.tit, 'alert_tit')[0];
			this.oH2.innerHTML = this.oTitle;
			this.oAlert_tit.appendChild(this.oH2);
		}
		this.content();
		this.width();
		this.height();
		this.top();
		this.left();
		this.fixed();
		this.close();
		this.Top = this.oFra.offsetTop;
		this.oFra.style.top = (this.Top - 40) +'px';
		this.oFra.style.marginTop = 0;
		this.sMove(this.oFra, {top:this.Top, opacity:100});
		this.sMove(this.oBackg, {opacity:50});
	},
	oEve: function(onEnd){
        this.onEnd = {};
        Object.extend(this.onEnd, onEnd || {});
    },
	content : function(){
		this.conent = $$$(this.tit, 'alert_con')[0];
		this.conent == undefined ? this.con.innerHTML = this.oContent : this.conent.innerHTML = this.oContent;
		this.oButton = $$(this.tit, 'button');
		var i = 0;
		var _this = this;
		for(i=0;i<this.oButton.length;i++)this.oButton[i].onclick = function(){_this.em.onclick()};
	},
	width : function(){
		this.oBackg = $$$(this.tit, 'alert_backg')[0];
		this.oFrame = $$$(this.tit, 'alert_frame')[0];
		this.oCon = $$$(this.oFrame, 'con')[0];
		this.oTop_c = $$$(this.oFrame, 'top_c')[0];
		this.oCon_c = $$$(this.oFrame, 'con_c')[0];
		this.oBot_c = $$$(this.oFrame, 'bot_c')[0];
		this.oAlert_tit = $$$(this.oFrame, 'alert_tit')[0];
		this.oAlert_con = $$$(this.oFrame, 'alert_con')[0];
		if(this.iWidth != ""){
			this.oFrame.style.width = parseInt(this.iWidth) +'px';
			this.oFrame.style.marginLeft = -parseInt(this.iWidth) / 2 +'px';
			this.oTop_c.style.width = parseInt(this.iWidth) - 10 +'px';
			this.oCon_c.style.width = parseInt(this.iWidth) - 10 +'px';
			this.oBot_c.style.width = parseInt(this.iWidth) - 10 +'px';
			this.oAlert_tit.style.width = parseInt(this.iWidth) - 12 +'px';
			this.oAlert_con.style.width = parseInt(this.iWidth) - 10 +'px';
		}
	},
	height : function(){
		if(this.iHeight != ""){
			this.oFrame.style.height = parseInt(this.iHeight) +'px';
			this.oFrame.style.marginTop = -parseInt(this.iHeight) / 2 +'px';
			this.oCon.style.height = parseInt(this.iHeight) - 10 +'px';
			this.oAlert_con.style.height = parseInt(this.iHeight) - 40 +'px';
		}
	},
	top : function(){
		if(this.iTop != "")this.oFrame.style.top = parseInt(this.iTop) +'px',this.oFrame.style.marginTop = 0;
	},
	left : function(){
		if(this.iLeft != "")this.oFrame.style.left = parseInt(this.iLeft) +'px',this.oFrame.style.marginLeft = 0;
	},
	backg : function(){
		this.oScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
		this.oScrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
		this.oBackg.style.width = document.documentElement.clientWidth + (this.oScrollWidth - document.documentElement.clientWidth) +'px'
		this.oBackg.style.height = document.documentElement.clientHeight + (this.oScrollHeight - document.documentElement.clientHeight) +'px'
	},
	fixed : function(){
		if(this.iFixed == "fixed"){
			var _this = this;
			this.oFrame.style.position = 'fixed';
			this.oAlert_tit.style.cursor = 'move';
			this.oAlert_tit.onmousedown = function(e){
				var _thisE = this;
				this.oEvent = e || event;
				this.X = this.oEvent.clientX - _this.oFrame.offsetLeft;
				this.Y = this.oEvent.clientY - _this.oFrame.offsetTop;
				document.onmousemove = function(e){
					this.oEvent = e || event;
					this.L = this.oEvent.clientX - _thisE.X;
					this.T = this.oEvent.clientY - _thisE.Y;
					if(this.L < 0){
						this.L = 0;
					}else if(this.L > document.documentElement.clientWidth - _this.oFrame.offsetWidth){
						this.L = document.documentElement.clientWidth - _this.oFrame.offsetWidth
					}
					if(this.T < 0){
						this.T = 0;
					}else if(this.T > document.documentElement.clientHeight - _this.oFrame.offsetHeight){
						this.T = document.documentElement.clientHeight - _this.oFrame.offsetHeight;
					}
					_this.oFrame.style.left = this.L + 'px';
					_this.oFrame.style.top = this.T + 'px';
					_this.oFrame.style.margin = 0;
					return false;
				}
				document.onmouseup = function(){
					document.onmouseup = null;
					document.onmousemove = null;
				};
				return false;

			};
			if(this.oFrame){
				if(!-[1,] && !window.XMLHttpRequest){
					document.documentElement.style.textOverflow = "ellipsis";
					this.oFrame.style.position = "absolute";
					this.oFrame.style.setExpression("top", "eval(documentElement.scrollTop + " + this.oFrame.offsetTop + ') + "px"');
				}
			}
		}
	},
	close : function(){
		if(this.iClose == "close" && this.oTitle != ""){
			var _this = this;
			this.clos = $$$(this.tit, 'alert_tit')[0];
			var oEm = document.createElement('em');
			this.clos.appendChild(oEm);
			this.em = $$(this.tit, 'em')[0];
			this.em.onmouseover = function(){_this.em.className = 'hove';};
			this.em.onmouseout = function(){_this.em.className = '';};
			this.em.onclick = function(){
				_this.sMove(_this.oFra, {top:(_this.Top - 40), opacity:0},function(){
					document.body.removeChild(_this.em.parentNode.parentNode.parentNode.parentNode.parentNode);
				});
				_this.sMove(_this.oBackg, {opacity:0});
			}
		}
	},
	getStyle : function(obj, attr)
	{
		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
	},
	sMove : function(obj, json, onEnd){
		var _this = this;
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			_this.dMove(obj, json, onEnd);
		},30);
	},
	dMove : function(obj, json, onEnd){
		this.attr = '';
		this.bStop = true;

		for(this.attr in json){
			this.iCur = 0;			
			this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));
			this.iSpeed = (json[this.attr] - this.iCur) / 7;
			this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed);			
			if(json[this.attr] != this.iCur)this.bStop = false;
			if(this.attr == 'opacity'){
				obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';
				obj.style.opacity = (this.iCur + this.iSpeed ) / 100;
			}else{
				obj.style[this.attr] = this.iCur + this.iSpeed + 'px';
			}
		}
		if(this.bStop){
			clearInterval(obj.timer);			
			if(onEnd)onEnd();
		}
	}
};
window.onload = function(){
	new Alert('but', 'box', {
		title : '提示内容',
		content : '<div class="size">确定不在关注新浪微博？</div><div class="but"><button class="button">确定</button><button class="button">取消</button></div>',
		width : '',
		height : '',
		top : '',
		left : '',
		fixed : '',
		close : 'close'
	});
};
</script>
</head>
<body style="height:950px;">
<div class="title">API</div>
<div class="table">
	<ul>
    	<li class="td">属性</li>
        <li class="td">默认值</li>
        <li class="tit td">说明</li>
        <li>ButId</li>
        <li>but</li>
        <li class="tit">点击按钮Id（必选）</li>
        <li>ElementId</li>
        <li>box</li>
        <li class="tit">弹出层Id（必选）</li>
        <li>title</li>
        <li>提示信息</li>
        <li class="tit">提示层标题（可选）</li>
        <li>content</li>
        <li>自行编辑</li>
        <li class="tit">提示层内容（可选）</li>
        <li>width</li>
        <li>340px</li>
        <li class="tit">提示层宽度（可选）</li>
        <li>height</li>
        <li>120px</li>
        <li class="tit">提示层高度（可选）</li>
        <li>top</li>
        <li>绝对居中</li>
        <li class="tit">提示层上间距（可选）</li>
        <li>left</li>
        <li>绝对居中</li>
        <li class="tit">提示层上间距（可选）</li>
        <li>fixed</li>
        <li>相对定位</li>
        <li class="tit">跟谁滚动条绝对定位/是否拖拽（fixed:'fixed'）（可选）</li>
        <li>close</li>
        <li>close</li>
        <li class="tit">是否显示关闭按钮（close:'close'）（可选）</li>
    </ul>
    <div class="tr"><a href="javascript:;" id="but">Examples</a></div>
</div>
</body>
</html>
cqh520llr
关注
专栏目录
制作一个漂亮的提示框
铭心工作室
04-29 1795
        曾经在一个项目中要求制作一个漂亮的弹出窗口，一个小箭头指向所解释的对象。今天也尝试作了一个，给有兴趣的同志们参考共同学习。        首先做一个简单的提示窗口。编写HTML代码，把所有的提示窗口内容放在一个span对象中。鼠标放到a href="#" class="tip">CSSspan class="popbox">这里放一张图片Cascading Style 
css 手机弹出框,jQuery适用于手机端的弹出提示框代码
weixin_30877689的博客
08-03 976
特效描述：jQuery 适用于手机端 弹出提示框。jQuery弹出提示框，手机端提示框代码代码结构1. 引入CSS2. 引入JS3. HTML代码$(function(){$('#demo1').on('click', function(){webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);});$('#demo2').on('click',...
漂亮的html弹出层弹出窗口
09-20
漂亮的弹出层，弹出窗口的jquery方法，forZDialogDemo.html为演示页面，为普通的html开发提供便利，非常方便，漂亮，适用于各种浏览器，兼容性好
超级漂亮的js弹出框效果
03-26
超级漂亮的js弹出框效果超级漂亮的js弹出框效果超级漂亮的js弹出框效果
一款漂亮的弹窗
06-10
flavr是—超级漂亮的jQuery扁平弹出对话框 ， 非常好看的弹窗样式和动画
一个漂亮的弹出框
04-04
NULL 博文链接：https://premier9527.iteye.com/blog/1503375
android 漂亮弹出框,酷炫的android dialog弹出框
weixin_39762666的博客
06-02 809
基于github开源框架基础上运用在自己的项目中,效果如下:本演示项目 基于Android Studio开发,在对应moudle下的gradle.build中添加以下依赖compile 'com.nineoldandroids:library:2.4.0'compile 'com.github.sd6352051.niftydialogeffects:niftydialogeffects:1.0....
Android中自定义PopupWindow实现弹出框并带有动画效果
09-01
本教程将详细讲解如何在Android中自定义PopupWindow来创建一个带有动画效果的弹出框。 首先，自定义一个名为`LostPopupWindow`的PopupWindow类。在这个类中，我们初始化了一些必要的属性，如`LayoutInflater`用于...
漂亮的对话框（弹出框）
11-18
在给定的标题“漂亮的对话框（弹出框）”和描述中，我们可以推断出这个话题是关于如何使用Kotlin扩展函数来创建美观且易于使用的对话框。下面我们将详细讨论如何利用Kotlin的扩展函数特性来实现这一目标。 首先，...
jquery弹出框样式
07-31
总结来说，创建好看的jQuery弹出框样式涉及HTML结构设计、CSS样式定制以及jQuery事件处理。通过这些技术，我们可以实现交互性强且视觉效果出色的弹出框，从而提高网站或应用的用户满意度。实践过程中，不断调整和...
（分享）一款很漂亮的弹框
03-28
NULL 博文链接：https://kingschan.iteye.com/blog/1258827
漂亮的弹出窗口
07-27
这个弹窗可以弹出确定框,选择框,还有弹出一个页面,弹出框可以移动,可自定义,也可以弹出做好的登录什么的.希望大家喜欢
JS弹出漂亮对话框
11-03
纯JS弹出漂亮对话框，这是几个超级漂亮插件的整合，你可以选择任意一种来用，不管是企业开发还是自己用，都感觉非常漂亮。
CSS+HTML5制作弹出框
09-09
自定义基础弹出框，可以在此基础上自定义出各类自己需要的弹出框
漂亮的div弹窗
09-27
绝对实用 有demo 包括了5种可以利用的弹窗效果。简单易懂
[100daysUI系列]好看的弹出框口UI设计.zip
12-28
在这个特定的压缩包中，我们关注的是“好看的弹出框口UI设计”。弹出框是用户界面设计中的一个重要元素，它用于向用户提供临时信息、警告、确认或进行交互操作。 1. **PSD文件**： 提供的"Day091 - Slide.psd"是一...
最好看的弹出框 前端页面开发需要的
08-06
标题中的“最好看的弹出框”指的是前端页面开发中的一种用户体验优化技术，通常涉及到对话框、提示框或者模态窗口的设计。这类弹出框在网页中起到信息提示、用户交互或确认操作的作用，设计得美观且易于理解，能够...
漂亮的弹框
牟云飞的博客
04-25 1317
-------------------------button------css .setButton{ background:#dddddd; border: #888888 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#E4FfFC
JS+HTML非常漂亮的 弹出小窗口 div弹出层
07-29
JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层
HTML好看的弹出框代码实现
最新发布
05-26
/* 定义弹出框样式 */ .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ccc; padding: 20px; box-shadow: 0 0 10px rgba...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值