点击锚点和轮播控件正在关闭模式

Posted 2023-05-08

【中文标题】点击锚点和轮播控件正在关闭模式

【英文标题】：Clicks on anchors and carousel controls are closing the modal

【发布时间】：2018-05-10 10:26:31

【问题描述】：

我有一个带有轮播的模式，点击图片缩略图就会出现。问题是，每当我单击用于在图片之间导航的箭头时，模式就会关闭。图片是从数据库中动态加载的，这就是<div class="carousel-inner"> 为空的原因

html

<div class="modal fade" id="modal-gallery" role="dialog">
    <div class="modal-dialog modal-lg">
        <div>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div>
                <div id="modal-carousel" class="carousel slide" data-ride="carousel">

                    <div class="carousel-inner" role="listbox">
                    </div>

                    <a class="carousel-control-prev left" href="#modal-carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next right" href="#modal-carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () 
    $('#myTab a').click(function (e) 
        e.preventDefault()
        $(this).tab('show')
    )

   /* activate the carousel */
   $("#modal-carousel").carousel(interval:false);

   /* change modal title when slide changes */
   $("#modal-carousel").on("slid.bs.carousel", function () 
        $(".modal-title")
        .html($(this)
        .find(".active img")
        .attr("title"));
   );

   /* when clicking a thumbnail */
   $(".thumbnail").click(function () 
    var content = $(".carousel-inner");
    var title = $(".modal-title");
    content.empty();  
    title.empty();

    var id = this.id;  
     var repo = $("#img-repo .carousel-item");
     var repoCopy = repo.filter("#" + id).clone();
     var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");
  );

);

几天前它就像一个魅力，不知道我做了什么来打破它。

谢谢

【问题讨论】：

创建一个工作小提琴

我无法创建一个工作小提琴，因为整个事情都不起作用。转到link 并单击导航菜单中的第二项。你会在那里看到它。

您说模态可以正常工作，但是当您单击箭头时，模态会消失，然后它可以工作，但是除非您发布有效的 sn-p，否则它存在一个难以解决的问题。

检查我提供的链接。

Uncaught ReferenceError: $ is not defined at gallery?page=1&furnitureType=1:167 从控制台检查错误并尝试解决它也许会解决您的问题

【参考方案1】：

您忘记.modal-content 的问题，它是.modal-dialog 的唯一直接子代，参见The Official Bootstrap Site 的示例

你的代码必须是这样的：

<div class="modal fade" id="modal-gallery" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content"><!-- .modal-content class added -->
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div>
            <div id="modal-carousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                </div>
                <a class="carousel-control-prev left" href="#modal-carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next right" href="#modal-carousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

您在modal-dialog 下已经有一个直接的div 子级，但没有任何类。

添加class="modal-content"，它应该可以工作。

【讨论】：

非常感谢您的关注！如此简单而愚蠢的错误。

【参考方案2】：

问题在于您的内容位于侦听点击事件并关闭模式的元素内。为了帮助您理解问题，我将简单地解释一下：

假设您有一个 X 和一个 Y 标签。 Y标签是X的后代，或者从结构上讲，它在X内部。当你点击Y时，点击事件会发生，它会在它的父标签上触发一个点击事件，第二次点击（这次是在它的父标签上） Y) 将被处理，并在（Y）父级的父级上触发单击，依此类推，因此如果单击 Y，则将单击 Y 的所有祖先。这是默认行为。

您的问题是单击锚点最终会触发对元素的单击，单击该元素时应关闭模式。解决方案是向负责淡化模型的元素的子元素添加一个单击事件，并确保您停止将单击事件传播到更高的结构元素，方法是调用

e.stopPropagation();

【讨论】：

我试过了，但没有用。无论我点击哪里，模式都会关闭。甚至在图片上。

@DanielGeorgiev 你把 e.stopPropagation(); ?