ドロップダウンメニューのライトボックスエフェクトを選択した後

Question

html要素を取得したページでドロップダウンメニューを実行しましたが、ライトボックスエフェクトを適用したい場合は、ボックスからいくつかの要素を選択するとライトボックスのように見えます可能であればライトボックスエフェクトを適用したいと思っていますが、このプラグインと似たものが欲しいですが、画像でしか見えないものがあります。http://getuikit.com/docs/lightbox.html

Can誰か助けて？または、これを行うプラグインを提案しますか？

私のバイオリン： http://jsfiddle.net/wjLXk/42/

は1を更新：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を書きます。

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>

（CSSコードで.lbルールを参照してください）あなたは、ライトボックスのサイズに基づいて自動位置決めを書き込むライトボックス下のオーバーレイdiv要素を追加してくださいMAKする必要があり、ユーザーが閉じることができますライトボックス。