Question

我需要帮助，

我的标签在bootstrap模式中无法正常工作，

当我从Bootstrap模式中输入时，availableTags选项不会出现，

但是当我把它放在bootstrap模态之外时，availableTags会显示出来。

这是我的代码，

<head>
    <!-- Include JQUERY and JQUERY UI and JQUERY TAG IT -->
    <script>
        $(function(){
            var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];

            $('#serverTagsInsideModal').tagit({
                    availableTags: sampleTags
            });    

            $('#serverTagsOutsideModal').tagit({
                availableTags: sampleTags
            });

        });
    </script>
</head>

<body>
    <div id="newServerModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add New Server</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label  for="server_tag">Server Tags</label>
                        <ul id="serverTagsInsideModal"></ul>
                    </div>    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
    <ul id="serverTagsOutsideModal"></ul>
</body>

Answer 1

您可能已经找到了，但是这个答案为我解决了这个问题：

https://github.com/aehlke/tag-it/issues/171

.ui-autocomplete
{
z-index: 1051;
}

JQuery - 标记IT（availableTags）在bootstrap模式中不起作用

1 个答案: