如何使用滑块创建覆盖图？

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>