twitter-bootstrap 带有 ajax 微调器的弹出窗口,用于 twitter 引导

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14972451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:26:46  来源:igfitidea点击:

Popup window with ajax spinner for twitter bootstrap

ajaxtwitter-bootstrap

提问by Alan Coromano

Is there a standard popup window with ajax spinner in twitter bootstap? Although it should be, I haven't found anything about it.

在 twitter bootstap 中是否有带有 ajax 微调器的标准弹出窗口?虽然它应该是,但我还没有找到任何关于它的信息。

采纳答案by codefreak

You can use bootstrap modal plugin http://twitter.github.com/bootstrap/javascript.html#modalsfor loading ajax content in popup.

您可以使用引导模式插件http://twitter.github.com/bootstrap/javascript.html#modals在弹出窗口中加载 ajax 内容。

There isn't a bootstrap way to have spinner, but you can do it at your own before showing modal popup.

没有一种引导方式可以使用微调器,但您可以在显示模态弹出窗口之前自行完成。

回答by spedley

This is what worked for me on an Ajax call using Font Awesome (as recommended in the accepted answer) and tweaking out the modal style a bit:

这对我使用 Font Awesome 进行 Ajax 调用(如已接受的答案中所推荐)并稍微调整模态样式对我有用:

<!-- CSS -->
<style>
    #spinner-modal .modal-dialog,
    #spinner-modal .modal-content,
    #spinner-modal .modal-body {
        background: transparent;
        color: rgba(255,255,255,1);
        box-shadow: none;
        border: none;
    }
</style>

<!--[ SPINNER MODAL ]-->
<div class="modal fade" id="spinner-modal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center">
                <h3><i class="fa fa-cog fa-spin"></i> Working...</h3>
            </div>
        </div>
    </div>
</div>

<!--[ JS ]-->
<script>
        $('#search-form-input').autocomplete({
            source: '/search.php',
            minLength: 2,
            select: function(event, ui) {
                $('#spinner-modal').modal('show');
                var url = '/a/results/index.php?i=' + ui.item.item_id;
                window.location.href = url;
            }
        });
</script>