選擇後的下拉菜單燈箱效果

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和麥肯定的是，用戶可以關閉燈箱。