1

我正在尝试在引导模式窗口中实现Summernote所见即所得编辑器。我遇到的问题是，当我在模式中执行此操作时，不会出现悬停工具提示。（在没有模态的情况下工作正常）。似乎发生的情况是，有时您可以在模态窗口后面看到工具提示边框的边缘，让我觉得它们在窗口后面。我尝试定位工具提示并将其 Z-index 更改为 9999，但这不起作用。请你能帮我弄清楚我哪里出错了。

<!--################### Bootstrap Modals With Forms DESCRIPTION ##########################-->                    
<!-- <button class="btn-u" data-toggle="modal" data-target="#responsive">Launch Button</button> -->
<div class="modal fade sky-form blackform" data-backdrop="static" id="descriptionform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content col-md-12" style="min-width:490px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Project Description</h4>
            </div>
            <div class="modal-body" >
                <div class="row">
                    <!-- <div class="modal-body"> -->
                    <!-- ################CONTENT FOR MODAL#################### -->
                    <div class="col-lg-12">
                        <form action="PR_detailsform.php" method="post" id="projdescription">
                            <input type="hidden" name="idkey" value="<?php echo $Pkey; ?>">
                            <input type="hidden" name="catx" value="<?php echo $cat; ?>">
                            <input type="hidden" name="navx" value="<?php echo $nav; ?>">
                            <div class="form-group">
                                <label for="">Edit</label>
                                <textarea name="details" id="summernote" rows="10" class="form-control"><?php echo $projectdetail; ?></textarea>
                            </div>
                            <button style="background:#72c02c;color: white;" type="button" class="btn btn-submit" onClick='submitDescriptionForm()'>Submit</button>
                            <button type="button" class="btn btn-submit" data-dismiss="modal">Cancel</button>
                            <!-- <input type='button' value='Save Project' class="btn-u btn-u-primary" onClick='submitDetailsForm2()' /> -->
                        </form>
                    </div>
                    <!-- ##################END MODAL CONTENT################ -->
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ################End Bootstrap Modals With Forms #########################-->
4

2 回答 2

1

我遇到了类似的问题，在模式弹出窗口中它还显示滚动条（css问题）同时显示工具提示来解决这个问题..尝试使用默认浏览器工具提示（标题属性），修改你的summernote.js文件并添加标题属性

我的 Summernote.js 文件 - 例如版本 0.5.1：

bold: function (lang) {
            return '<button type="button" class="btn btn-default btn-sm btn-small" title="' + lang.font.bold + '" data-shortcut="Ctrl+B" data-mac-shortcut="⌘+B" data-event="bold" tabindex="-1"><i class="fa fa-bold icon-bold"></i></button>';
        },
        italic: function (lang) {
            return '<button type="button" class="btn btn-default btn-sm btn-small" title="' + lang.font.italic + '" data-shortcut="Ctrl+I" data-mac-shortcut="⌘+I" data-event="italic" tabindex="-1"><i class="fa fa-italic icon-italic"></i></button>';
        },
        underline: function (lang) {
            return '<button type="button" class="btn btn-default btn-sm btn-small" title="' + lang.font.underline + '" data-shortcut="Ctrl+U" data-mac-shortcut="⌘+U" data-event="underline" tabindex="-1"><i class="fa fa-underline icon-underline"></i></button>';
        },

希望对你有帮助

于 2015-05-29T11:12:46.383 回答
1

我会完全诚实。我在互联网上找到了这段代码，解释这将有助于工具提示。完全忘记保存我发现这个的网站，但它就像一个魅力。

    $(document).on("show.bs.modal", '.modal', function (event) {
    // console.log("Global show.bs.modal fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    $(this).css("z-index", zIndex);
    setTimeout(function () {
        $(".modal-backdrop").not(".modal-stack").first().css("z-index", zIndex - 1).addClass("modal-stack");
    }, 0);
}).on("hidden.bs.modal", '.modal', function (event) {
    // console.log("Global hidden.bs.modal fire");
    $(".modal:visible").length && $("body").addClass("modal-open");
});
$(document).on('inserted.bs.tooltip', function (event) {
    // console.log("Global show.bs.tooltip fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var tooltipId = $(event.target).attr("aria-describedby");
    $("#" + tooltipId).css("z-index", zIndex);
});
$(document).on('inserted.bs.popover', function (event) {
    // console.log("Global inserted.bs.popover fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var popoverId = $(event.target).attr("aria-describedby");
    $("#" + popoverId).css("z-index", zIndex);
});

我希望这对你也有用。

于 2018-11-25T16:01:02.340 回答