Javascript 是否有一个弹出Jquery插件
Hy, 我的图片很好地描述了我正在搜索的内容。它的ap弹出/模式框有2个选择选项…只能选择1个 我搜索的是一个带有不同选择选项的弹出窗口…可能在按钮中…或作为图片…我不想使用标准选择元素。。。 有没有什么好的例子…Codepen…Jquery插件可以很容易地解决这个问题Javascript 是否有一个弹出Jquery插件,javascript,jquery,html,Javascript,Jquery,Html,Hy, 我的图片很好地描述了我正在搜索的内容。它的ap弹出/模式框有2个选择选项…只能选择1个 我搜索的是一个带有不同选择选项的弹出窗口…可能在按钮中…或作为图片…我不想使用标准选择元素。。。 有没有什么好的例子…Codepen…Jquery插件可以很容易地解决这个问题 非常感谢这可以通过fancybox和jQuery来完成 我不确定我是否理解正确,但您正在寻找不使用的下拉列表,对吗?是的,我想用somting elseStick替换,并添加一些CSS来设置样式。是的,这是可能的。这样代码就更少
非常感谢这可以通过fancybox和jQuery来完成
我不确定我是否理解正确,但您正在寻找不使用的下拉列表,对吗?是的,我想用somting elseStick替换,并添加一些CSS来设置样式。是的,这是可能的。这样代码就更少了。示例:否则,请使用jQuery,示例:当然可能,但我的选项有很长的文本,并且select元素不是我的最佳选项…Kevin P的答案将帮助我解决问题…谢谢Shappy的帮助。请您将此标记为已接受的答案,并让我知道您是否需要任何进一步的指导。再次感谢您……可能是有用的提示……添加jQuery.fancybox.close;$this.addClass'btn-success'之后;选择后将自动关闭fancybox:
<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>