如何在 bootstrap 3 模式框上显示我的自定义警告框？

Question

我有一个带有表单的 bootstrap 模式。当我点击保存按钮时，我的 jquery 函数将检查表单元素是否为空。如果为空，将显示自定义错误消息。

<!-- Modal -->
        <div class="modal fade" id="Item-Modal" form-name="ItemMaster" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="heading"></h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" action="" method="post" id="ItemADD">
                                                            <div class="form-group">
                                <label for="inputItemName" class="col-sm-4 control-label">Item Name</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control enter modal-count" id="ItemName" value="" tabindex="1" required>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary modal-save" tabindex="2" id="btnsave">Save changes</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

// jquery

<script>
        $(document).ready(function () {
            $('#Item-Modal').on('shown.bs.modal', function () {
                $("#btnsave").on('click', function () {
                    var value = $('#ItemName').val();
                    if (value == '') {
                        Simple.render1('Please enter a vehicle brand name!');// my custom alert box
                    }
                });
            });
        });
    </script>

我的问题是警告框出现在模式框下方。解决方案是什么？（正常的警告框正在工作...）

Answer 1

在模式内添加一个带有自定义弹出窗口的 div 并将其设置为隐藏。每当有需要自定义弹窗的事件时，多用几行js就可以显示

Answer 2

我自己找到了解决方案。这是一个与 css 相关的问题。在显示页面添加以下代码

#div_id{
  z-index: 5000;
 }

其中div_id是div警告框主体的名称……

如何在 bootstrap 3 模式框上显示我的自定义警告框？

How to show my customaized alert box over bootstrap3 modal box?

jquery

bootstrap-modal

twitter-bootstrap-3