如何让模态在几秒钟后消失？

Question

我在模态框内使用 Iframe，几秒钟后我隐藏了包含模态框的 div，但实际屏幕没有聚焦，它仍然淡出。请查看下面的图片以获得更清晰的信息。还有一个问题，有没有办法改变我在视频下方播放和暂停的播放器栏。它真的很无聊。

这个主页应该是焦点，就像其他普通页面一样，但它仍然褪色。

强文本

代码在这里，

<div class="logo" id="div3">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <iframe id="Video" width="900" height="500" src="C:\Users\deeptim\Downloads\picture_shop_logo.mp4" allowfullscreen ALLOWTRANSPARENCY="true"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

而函数是

     $(document).ready(function () {
           setTimeout(function () {
                $("div#logo_text").fadeOut("slow", function () {
                $("div#logo_text").hide();
                $("div#logo_img").show();
                $("div#div3").hide();
                $("div#myCarousel").show();
              });
          }, 5000);
       });

  setTimeout(function () {
        $('#div3').fadeOut('fast');
    }, 5000);

    $(document).ready(function () {
        var url = $("#Video").attr('src');

        $("#myModal").on('hide.bs.modal', function () {
            $("#Video").attr('src', '');
        });

        $("#myModal").on('show.bs.modal', function () {
            $("#Video").attr('src', url);
        });

        $("#myModal").modal(); //Display modal on load

    });  

有什么办法可以达到上述要求吗？

Answer 1

使用$("#myModal").modal("hide") 来实际使用hide 模态，而不是单独隐藏各个组件。另外我不明白为什么你有两个 timeouts 具有完全相同的延迟。请尝试以下操作。

       $(document).ready(function () {
           setTimeout(function () {
                $("div#logo_text").fadeOut("slow", function () {

                $("div#logo_img").show();

                //Hide modal window
                //////////////////////////////////////
                $("#myModal").modal("hide");
                //////////////////////////////////////

                $("div#myCarousel").show();
              });
          }, 5000);
       });

    $(document).ready(function () {
        var url = $("#Video").attr('src');

        $("#myModal").on('hide.bs.modal', function () {
            $("#Video").attr('src', '');
        });

        $("#myModal").on('show.bs.modal', function () {
            $("#Video").attr('src', url);
        });

        $("#myModal").modal("show"); //Display modal on load

    });