javascript - 具有更多 jQuery 功能的灯箱？

Question

我是 jQuery 的新手，之前从未真正玩过灯箱。

但有人问我是否可以在工作中为愚人节做点什么，我愚蠢地答应了，因为我认为这比实际情况要容易，但现在我很挣扎。

我会告诉您所要求的内容。

1 - Homepage Banner > Click
2 - On Click a lightbox pops up "Speak your search term"
3 - Click Button To Speak - 5 seconds later "Sorry, we can't hear you, Shout"
4 - Click Button To Shout - "April Fools - Here's a promo code for 10% off. XXXXXX"

我已经完成了最后 3 个步骤 - 不确定它们是否可以做得更好，但我在这里摆弄了它们:http://jsfiddle.net/C8f3P/1/

我想我真正想问的是，如何在点击横幅后将所有这些添加到灯箱中？灯箱真的是可行的方法吗？

注意 我刚刚在 JSFiddle 中模拟了一些东西，它看起来不是那样的:)

Answer 1

我喜欢!

我们有一个记录语音搜索的设置。当人停止时。它提交。

虽然此解决方案仅适用于 chrome...

<input type="search" name="q" value="" id="searchInputField" placeholder="WHAT CAN WE FIND FOR YOU?" x-webkit-speech="">

<script>
$(document).ready(function() {
    $('#searchInputField').bind('webkitspeechchange',function() {
        $(this).parent('form').submit(function( event ) {
                  alert( "Speak up I can't hear you!" );
             event.preventDefault();
            });
    });
});
</script>

我更改了它以提醒您。也许它会有所帮助。

如果您使用的是 chrome，那么这将起作用。确保你的手机记录了最初的 react ……它应该是无价的。

也许可以将输入隐藏在某处的 div 中，或者通过 CSS 将其隐藏在屏幕之外。只是一些想法。

但这听起来很有趣。我可能会对我的开发团队进行一些欺骗。感谢您鼓励这种不正常的行为:)

祝你好运!