复制代码 代码如下:
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>遮罩演练</title>
<link href="../css/component2.css" rel="Stylesheet"/>
<script src="/UploadFiles/2021-04-02/jquery-1.11.0.min.js"><script src="../js/shadow.js"></head>
<body>
<div class="left-container layout-container">
<ul class="topic-title">
<li>
<span class="fun">++++</span>
</li>
</ul>
</div>
<div class="right-container layout-container">
</div>
<div style="display:none">
<div class="topic-input-div" id="content-container-templet">
<ul class="topic-input-ul">
<li class="input-li"><input type="text" style="width: 100%;line-height: 2em" placeholder="请输入标题"/></li>
<li class="btn-li"><button class="sure">确定</button></li>
<li class="btn-li"><button class="cancel">取消</button></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.fun').on('click',function(){
console.log('fun click');
showAddTopic(function(val){
console.log(val);
});
});
});
</script>
</html>
shadow.js
复制代码 代码如下:
shadow_list=[];
function showAddTopic(cb){
var input_container=$('#content-container-templet').clone();
input_container.removeAttr('id');
var shadow=$('<div />').addClass('shadow-wrapper').append(input_container);
shadow.appendTo(document.body);
shadow_list.push(shadow);
$('.sure',shadow).on('click',function(){
var val=$('.input-li input',shadow).val();
cb(val);
hideAddTopic();
});
$('.cancel',shadow).on('click',function(){
hideAddTopic();
});
}
function hideAddTopic(){
if(shadow_list.length>0){
var shadow=shadow_list.pop();
shadow.remove();
}
}
component2.css
复制代码 代码如下:
html,body{
padding:0px;
margin: 0px;
width: 100%;
height: 100%;
overflow:hidden;
}
ul,li{
padding:0px;
margin: 0px;
list-style:none;
}
input,textarea{
vertical-align:middle;
border:none;
}
.layout-container{
position:absolute;
top:0px;
height:100%;
overflow:auto;
}
.left-container{
left: 0px;
width:20%;
border:solid 5px #52BE7F;
}
.right-container{
right:0px;
width:80%;
}
.shadow-wrapper{
position: absolute;
width:100%;
height: 100%;
}
.topic-title li span{
height:30px;
line-height:30px;
vertical-align:middle;
}
.topic-title .fun{
float:right;
}
.topic-input-div{
position: absolute;
left: 50%;
top:50%;
height:200px;
width: 400px;
margin-top:-120px ;
margin-left:-210px;
padding:20px 10px;
}
.topic-input-ul{
vertical-align: middle;
position:absolute;
width:380px;
height:2em;
left: 50%;
top:50%;
margin-top: -1em;
margin-left: -190px;
}
.topic-input-ul li{
line-height: 2em;
display:inline-block;
*display:inline;
}
.topic-input-ul .input-li{
width:40%;
}
.topic-input-ul .btn-li{
width: 15%;
}
遮罩层
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。