如何创建带滑块的叠加层？

Question

我想用光滑的滑块创建类似的东西：

单击按钮后，应显示带滑块的叠加层。我认为我应该使用光滑滑块的中心模式。我知道如何设置颜色，宽度等样式，但我无法实现上述结构。

Answer 1

有多种方法可以实现这一点，以下是我使用灯箱创建的示例，您可以从这里获取想法，查看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>

Answer 2

使用100% width and height创建一个div 把它absolutely positioned relative to body/html。 把你的滑块放在这个div里面。 您可以使用display none中的css隐藏它，当用户点击您的触发器时，显示它或您可以使用 单击按钮时.show() in jquery。 这个想法就在那里。

您需要做的就是实现滑块