小渣渣模拟的prompt

曦雨幽兰
曦雨幽兰 发布于 2017-01-11 16:35:17 浏览:152 类型:原创 - 随笔 分类:JavaScript - javascript 二维码: 作者原创 版权保护
<!DOCTYPE html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟prompt</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	$(function(){
		$('#btn0').click(function(){
			var width = document.body.clientWidth+'px';
			 var height = document.documentElement.clientHeight+'px';
 
			 var p = {
				 width:$('#prompt').width(),
				 height:$('#prompt').height()
			 }
 
			 var left = ($(window).width() - p.width) / 2 + 'px';
			var top = ($(window).height() - p.height) / 2 + 'px';
 
			$('#middle').css({'width':width,'height':height,'position':'fixed'}).show();
			$('#prompt').css({'left':left,'top':top}).show();
			$('#output').hide();
			$(this).hide();
		})
 
		$('#btn1').click(function(){
			$('#ff').html($('#inp').val());
			$('#inp').val('');
			$('#output').show();
			$('#btn0').show();
			$('#middle,#prompt').hide();
		})
 
		$('#btn2').click(function(){
			$('#inp').val('');
			$('#btn0').show();
			$('#middle,#prompt').hide();
		})
	})
</script>
<style type="text/css">
	#middle{filter: alpha(opacity=50); opacity:0.3;-moz-opacity:0.3;z-index:3;background-color:#000;}
	#prompt{position:fixed;float: left;z-index:999;width:260px;background-color:#FFF;display:none;border-radius: 10px;}
	.tips{text-align: center;line-height: 40px;background: #3586bc;color: #fff;border-radius: 10px 10px 0 0;}
	.text{margin-top: 15px;}
	#inp{width: 90%;margin:0 5%;line-height: 28px;padding: 0;}
	.btns{text-align: center;padding: 15px 0;}
	#btn1,#btn2{color: #fff;padding: 5px 24px;color: #fff;border-radius: 5px;box-shadow: none;border:none;}
	#btn1{background: #3586bc;margin-right: 20px;}
	#btn2{background: #bdbdbd;}
</style>
 
<div style="z-index:1;">
	<button id="btn0">点击我输入内容</button><br />
	<span id="output" style="display:none">输入的内容为:<font color="red" id="ff" /></font></span>
</div>
<div id="middle"></div>
<div id="prompt">
	<div class="tips">请输入回复内容:</div>
	<div class="text"><input type="text" id="inp"/></div>
	<div class="btns">
		<button id="btn1">确定</button>     
		<button id="btn2">取消</button>
	</div>
</div>
标签:
z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
曦雨幽兰 曦雨幽兰 作者

作者最新