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

时间:2017-09-23 14:20:17

标签: javascript jquery css iframe bootstrap-modal

我在模态中使用iframe而且我在几秒钟之后隐藏了包含模态的div,但实际屏幕没有聚焦,它仍然消失了。请查看下面的图片以获得更清晰。还有一个问题,是否有任何方法可以改变玩家栏,我正在视频下方播放和暂停。真的很无聊。 enter image description here

这个主页应该像其他普通页面一样聚焦,但它仍然褪色。enter image description here

强文

代码就在这里,

<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

    });  

有没有办法达到上述要求?

1 个答案:

答案 0 :(得分: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

    });