是否有<select> </select>弹出式Jquery插件

Question

HY， 我的图片描述了非常好的iam搜索..它有一个带有2个选择选项的弹出窗口/模态框...只能选择1个

我正在搜索的是一个带有不同选择选项的弹出窗口....可能在按钮中......或者作为图片...我不想使用标准选择元素... 是否有任何不错的示例... Codepen .... Jquery插件/插件可以用来轻松解决这个问题？

非常感谢

Answer 1

这可以使用fancybox和jQuery来完成。

https://jsfiddle.net/axanj0n5/4/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css"/>


<div style="display: none; width:500px;" id="hidden-content">

    <h2>Lightbox</h2>

    <a href="#" id="button-one" class="btn btn-lg btn-default select-btn" data-value="1">Select me 1</a>
    <a href="#" id="button-one" class="btn btn-lg btn-default select-btn" data-value="2">Select me 2</a>
</div>

<div class="container">


    <a data-fancybox data-src="#hidden-content" href="javascript:;" class="btn btn-lg btn-success">
        Open Lightbox
    </a>
    <p>
        Selected Value<br>
        <input type="text" name="selected_value" id="selected_value"/>
    </p>
</div>

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

<script>
    $(function () {
        $('body').on('click', '.select-btn', function () {
            $selectBtn = $('.select-btn');
            $selectBtn.addClass('btn-default');

            $selectBtn.removeClass('btn-success');

            $(this).removeClass('btn-default');
            $(this).addClass('btn-success');

            $('#selected_value').val($(this).data('value'));
        })
    })
</script>