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并将其设置为隐藏。只要有需要自定义弹出窗口的事件，就可以使用更多行的j来显示它

Answer 2

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

#div_id{
  z-index: 5000;
 }

其中div_id是警报框体的div名称......

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

2 个答案: