<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>遮罩演練</title>
<link href="../css/component2.css" rel="Stylesheet"/>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/shadow.js"></script>
</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_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();
}
}
