hiI use the below code to show modal when page is loadnow I want after 5 seconds the Modal will disappearhow I can do it ltscript type34textjavascript34gt windowonload function settime 39myModal139modal39show39 ltscriptgt ltstyle type34textcss34gt behtopM position fixed top 50 left 50 bring your own prefixes tran

Hi nedashUse JavaScript setTimeout function Refer below sampleHTMLltdivgt ltdiv class34dsminlineflex34gt ltdiv class34row34gt ltdiv class34modal fade34 id34myModal134 tabindex34134 role34dialog34 arialabelledby34exampleModalLabel34 ariahidden34true34gt ltdiv class34modaldialog34gt ltaspImage ID34Image134 runat34server34 CssClass34behtopM34 ImageUrl34Imagebehtopbehtopmaingif34gtltaspImagegt ltdivgt ltdivgt ltdivgt ltdivgtltdivgtltscript src34httpscodejquerycomjquery331slimminjs34 integrity34sha384q8iX965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH8abtTE1Pi6jizo34 crossorigin34anonymous34gtltscriptgtltscript src34httpscdnjscloudflarecomajaxlibspopperjs1147umdpopperminjs3

Hide Bootstrap modal popup after 5 seconds (interval) in jQuery

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Apr 26, 2021 02:16 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 29123

I use the below code to show modal when page is load.

now I want after 5 seconds the Modal will disappear

how I can do it?

    <script type="text/javascript">
        window.onload = $(function settime() {
            $('#myModal1').modal('show');         
        });
    </script>
    <style type="text/css">
        .behtopM {
            position: fixed;
            top: 50%;
            left: 50%;
            /* bring your own prefixes */
            transform: translate(-50%, -50%);
        }
        #imagebeh {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="d-sm-inline-flex">
                <div class="row">
                    <div class="modal fade" id="myModal1">
                        <div id="Modal1">
                            <asp:Image ID="Image1" runat="server" CssClass="behtopM" ImageUrl="~/Image/behtop/behtop-main.gif"></asp:Image>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

Best regards

Neda

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Apr 26, 2021 02:25 AM
Modified: on Apr 26, 2021 07:11 AM
Report

Hi nedash,

Use JavaScript setTimeout function. Refer below sample.

HTML

<div>
    <div class="d-sm-inline-flex">
        <div class="row">
            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <asp:Image ID="Image1" runat="server" CssClass="behtopM" ImageUrl="~/Image/behtop/behtop-main.gif"></asp:Image>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {
        $('#myModal1').modal('show');
        setTimeout(function () {
            $('#myModal1').modal('hide');
        }, 5000);
    });
</script>
<style type="text/css">
    .behtopM {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #imagebeh {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
</style>

Hide Bootstrap modal popup after 5 seconds (interval) in jQuery

Company

Explore

Follow us

Contact Us