Question

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

有人能帮助我吗？或者建议任何插件执行此操作？

我的小提琴： 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

这是一个非常简单的例子，它只是想法，你必须努力才能拥有一个完整的解决方案。您必须使用css类来实现目标。

为你的div添加一个新类。（我的例子中是lb）。为它写下灯箱css。（请参阅css代码中的.lb规则）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可能需要根据灯箱尺寸编写自动定位，在灯箱下方添加叠加div并确定，用户可以关闭灯箱。

Answer 2

我强烈建议您为了您的目的更改插件库。尝试考虑Bootstrap modals，这会更容易：

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/

选中后，下拉菜单中的灯箱效果

2 个答案: