选择后的下拉菜单灯箱效果

Question

我在我的页面上做了一个下拉菜单，得到的html元素，工作正常。但我想申请一个灯箱效果，就像当我从框中选择一些元素出现像一个灯箱在我的页面前面，现在它只显示在我的html上，但是我想要应用一个lightbox效果，如果可能的话，我想要类似于这个插件的东西，但我可以看到只是在图像中工作：http://getuikit.com/docs/lightbox.html

Can谁来帮帮我？或者建议任何插件来做到这一点？

我的小提琴： http://jsfiddle.net/wjLXk/42/

更新之一：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 1

我强烈建议您为您的目的更改插件库。试着考虑Bootstrapmodals，这将是容易得多：

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') 
}); 

见我的例子在这里：https://jsfiddle.net/3fkqwej7/

Answer 2

这是一个非常简单的例子，它只是想法，你将不得不努力工作完整的解决方案。你将不得不使用CSS类来实现你的目标。

向你的div添加一个新类。 （在我的例子中为lb）。为它写灯箱的CSS。 （见.lb规则中的CSS代码）

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

body { 
 
    background-color: #ccc; 
 
} 
 

 
.lb { 
 
\t position: absolute; /* this will make your div to float above the rest of your content */ 
 
\t width: 80%; /* some careful positioning */ 
 
\t height: 80%; /* some careful positioning */ 
 
\t background-color: #fff; /* different background color to show how it would look like*/ 
 
\t left: 10%; /* some careful positioning */ 
 
\t top: 10%; /* some careful positioning */ 
 
}

<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 lb">one div</div> 
 
    <div id="npup1" class="hidden lb">second div</div> 
 
    <div id="npup2" class="hidden lb">third div</div> 
 
</div>

您可能需要根据收藏的大小来写自动定位，加上灯箱下方覆盖的div和麦肯定的是，用户可以关闭灯箱。