jquery制作居中遮罩層效果分享
<!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="請輸入標(biāo)題"/></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%;
}
相關(guān)文章
jQuery結(jié)合CSS制作漂亮的select下拉菜單
對于我來說,標(biāo)準(zhǔn)的HTML元素(Select)已經(jīng)讓我感到討厭。它不能夠正常的在IE瀏覽器上顯示。還有一點(diǎn)就是他并不僅僅包含簡單的文本。本實(shí)例將完全摒棄select元素,通過JQuery和CSS來構(gòu)建DropDown元素。2015-05-05JQuery 設(shè)置checkbox值二次無效的解決方法
下面小編就為大家?guī)硪黄狫Query 設(shè)置checkbox值二次無效的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jquery tools之tabs 選項(xiàng)卡/頁簽
jquery用這么久了,覺得雖然沒ExtJS等框架全面,功能強(qiáng)大,但是也確實(shí)做到了“the write less,do more”,而且學(xué)起來也方便,只需要仔細(xì)研讀一下它官方網(wǎng)站的API Reference,操作起來基本問題不是太大。2009-07-07jquery 中多條件選擇器,相對選擇器,層次選擇器的區(qū)別
jquery 中多條件選擇器,相對選擇器,層次選擇器的區(qū)別介紹,需要的朋友可以參考下2012-07-07Jqyery中同等與js中windows.onload的應(yīng)用
我們知道,在javascript中用來執(zhí)行頁面加載中的操作時(shí)候,我們會(huì)使用windows.onload=function(){}或者windows.onload=函數(shù)名(),也可以在body中調(diào)用onload事件調(diào)用方法即可,在jQuery中也有相當(dāng)?shù)拇a2011-05-05基于jQuery實(shí)現(xiàn)一個(gè)marquee無縫滾動(dòng)的插件
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)一個(gè)marquee無縫滾動(dòng)的插件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03jQuery查找和過濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07jquery監(jiān)聽div內(nèi)容的變化具體實(shí)現(xiàn)思路
在開發(fā)過程中遇到了上面標(biāo)題列出的問題:如何監(jiān)聽div內(nèi)容的變化,下面是具體的解決思路,感興趣的朋友可以參考下2013-11-11