如何使用滑塊創建覆蓋圖？

Question

我想創造類似的東西與滑頭滑：

這覆蓋與滑塊應點擊按鈕後會出現。我認爲我應該使用滑動滑塊的中心模式。我知道如何設計顏色，寬度等，但我無法實現上述結構。

Answer 1

與100% width and height創建一個div。
使其absolutely positioned relative to body/html。 把你的滑塊放在這個div裏面。 您可以通過使用css和display none當用戶點擊您的觸發，顯示它阻止或者您也可以點擊按鈕使用 .show() in jquery隱藏它。 的想法是存在的。

所有你需要做的是實現你的滑塊

Answer 2

有多種方式來實現這一點，下面是一個例子，我創建使用收藏夾，你可以從這裏得到的想法，檢查JSfiddle

CSS

#pageOverLay { 
    background: #fff none repeat scroll 0 0; 
    margin-left: 43%; 
    margin-top: 10%; 
    position: absolute; 
    width: 500px; 
    z-index: 1001; 
    visibility:hidden; 
} 
#pageOverLay-shadow { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #000; 
    filter: alpha(opacity=75); 
    -moz-opacity: 0.75; 
    -khtml-opacity: 0.75; 
    opacity: 0.75; 
    z-index: 1000; 
    visibility: hidden; 
} 
#pageOverLayCloseBtn { 
    position:absolute; 
    top:0; 
    right:0; 
} 
.slick-slider { 
    margin: 30px auto 50px; 
} 
.slick-slider { 
    -moz-user-select: none; 
    box-sizing: border-box; 
    display: block; 
    position: relative; 
} 

JQuery的

$("#openLB").on("mousedown","",showLightBox); 

function showLightBox() { 
    $("#pageOverLay-shadow").css("visibility", "visible"); 
    $("#pageOverLay").css("visibility", "visible"); 

} 

$("#pageOverLayCloseBtn").on("mousedown","",pageOverLayClose); 

function pageOverLayClose() { 
    $("#pageOverLay-shadow").css("visibility", "hidden"); 
    $("#pageOverLay").css("visibility", "hidden"); 
} 
var disqus_shortname = 'slickcarousel'; 

(function() { 
    var dsq = document.createElement('script'); 
    dsq.type = 'text/javascript'; 
    dsq.async = true; 
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
})(); 

HTML

<a id="openLB" href="#">Click Here to show lightbox</a> 
<div id="pageOverLay-shadow"></div> 
<div id="pageOverLay"> 
    <div id="pageOverLayCloseBtn"><a href="#" onclick="pageOverLayClose();">X</a> </div> 
    <h2>Images</h2> 
    <div class="slider fade"> 
    <div> 
     <div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg" /> </div> 
    </div> 
    <div> 
     <div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg" /> </div> 
    </div> 
    <div> 
     <div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg" /> </div> 
    </div> 
    </div> 
</div>