Как создать наложение с ползунком?

Question

Я хочу создать что-то подобное с пятно слайдер:

Эта покрышка с ползунком должен появиться после нажатия на кнопку. Я думаю, что я должен использовать режим централизованного слайдера. Я знаю, как стилить цвета, ширины и т. Д., Но я не могу реализовать описанную выше структуру.

Answer 1

Создайте div с 100% width and height.
сделать это absolutely positioned relative to body/html. поставьте свой слайдер внутри этого div. вы можете скрыть его, используя display none в css и когда пользователь нажимает на ваш триггер, отображает его или вы можете использовать .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>