html 弹窗

作者:freebeacon 分类: html 发布于:2016-4-25 12:08 ė171次浏览 60条评论
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>
.popup
{
	width:500px;
	height:130px;
	border:2px solid #B8B8B8;
	position: fixed;
	top:30%;
	left:30%;
	background-color:#E2E3E5;
	display:none;
}


.closebtn
{
    width: 40px;
    height: 40px;
    display: inline-block;
	text-align:center;
	cursor:default;
	float:right;
}

.urlCconten
{
	width:498px;
	height:85px;
	text-align:left;
	position:relative;
	top:5px;
	z-index:99;
}

.uploadbtn
{
	float:left;
	width:80px;
	text-align:center;
	background-color:#E7F5FE;
	cursor:pointer;
}
</style>



<div class="popup" id="popup">
	<span class="close closebtn" id="closeUrl" onclick="closeUrl();">╳</span>
	<textarea id="urlCconten" class="urlCconten" onclick="selectAll();"></textarea>
</div>

<button name="show" id="show" onclick="showPop();">show</button>


<script type="text/javascript">

//关闭弹窗
function closeUrl()
{
	$('#popup').hide();
}

//显示视频源url
function showPop()
{
	$('#urlCconten').html('这里是内容。。');
	//弹框显示
	$('#popup').show();
}

//全选textarea
function selectAll()
{
	$('#urlCconten').select();
}


</script>

本文出自 港湾灯塔,转载时请注明出处及相应链接。

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部