Raduken Raduken - 7 months ago 64
HTML Question

Lightbox effect for dropdown menu after selected

Hi guys I did a dropdown menu on my page, getting the html element, work fine.But I want apply a lightbox effect,like when I select some element from the box appears a like a lightbox in front of my page, right now its just showing on my html, but i would like apply a lightbox effect if possible, I want something similar to this plugin, but what I can see just work in images: http://getuikit.com/docs/lightbox.html

someone can give me a help? or suggestion, its any plugin on web who does this?

my fiddle:
http://jsfiddle.net/wjLXk/42/

updated one: http://jsfiddle.net/wjLXk/43/

html:

<select id="mySelect" onchange="npup.doSelect(this);">
<option value="">Npup says 'select'</option>
<!-- the option values are suffixes for the elements to show -->
<option value="0">show one</option>
<option value="1">show two</option>
<option value="2">show three</option>
</select>
<!-- container for any elements that are to be in the game -->
<div id="mySpecialElements">
<!-- these have ids that end with and index for easy retrieval in "findeElement" function below-->
<div id="npup0" class="hidden">one div</div>
<div id="npup1" class="hidden">second div</div>
<div id="npup2" class="hidden">third div</div>
</div>


js:

window.npup = (function (containerId, baseId) {
// save the container of your special element
var elementsContainer = document.getElementById(containerId);
var baseId = baseId;
function doSelect(select) {
// get value of select
var value = select.value;
// find element based on the value of the select
var targetDiv = findElement(value);
if (!targetDiv) { return;} // didn't find the element, bail
// do magic..
hideAll(elementsContainer);
showElement(targetDiv);
}
// retrieve some element based on the value submitted
function findElement(value) {
return document.getElementById(baseId+value);
}
// hide all element nodes within some parent element
function hideAll(parent) {
var children = parent.childNodes, child;
// loop all the parent's children
for (var idx=0, len = children.length; idx<len; ++idx) {
child = children.item(idx);
// if element node (not comment- or textnode)
if (child.nodeType===1) {
// hide it
child.style.display = 'none';
}
}
}
// display a certain element
function showElement(element) {
element.style.display = '';
}
// hide all on page load (might want some extra logic here)
hideAll(elementsContainer);

// export api to use from select element's onchange or so
return {
doSelect: doSelect
};
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements

Answer

I strongly reccomend you to change plugin library for your purposes. Try considering Bootstrap modals, it will be much easier:

HTML

<select id="mySelect">
    <option value="">Npup says 'select'</option>
    <!-- the option values are suffixes for the elements to show -->
    <option value="#myModal1">show one</option>
    <option value="#myModal2">show two</option>
    <option value="#myModal3">show three</option>
</select>

JS

$('#mySelect').on("change", function(){
    var modalID = $(this).val();
    $(modalID).modal('show')
});

See my example here: https://jsfiddle.net/3fkqwej7/

Comments