Bootstrap Modalpopup on page load

Question

5.00/5 (2 votes)

See more:

VS2010

Hello , i am using bootstrap modalpopup to show my advertisement on pageload. However, i only want the modalpopup to be shown only once during the session and will not appear anymore after the user close the modalpopup.

I have tried the following codes but the modalpopup keeps appearing after page refresh :

<script type="text/javascript">
$(window).load(function () {
$('#myModal').modal('show');
});
</script>

This codes shows the modalpopup everytime the page refresh. Any idea how to make it appear only once within a session only?

Any help would be greatly appreciated!

Posted 23-Jul-13 2:36am

Jerrell77

Updated 10-Mar-16 23:12pm

Add a Solution

Comments

Jameel VM 23-Jul-13 8:42am

remove it from the onload function. show the pop up only you want.

Jerrell77 24-Jul-13 9:59am

but if i refresh that particular page, it will show up again. how do you make it such that it only comes up once? and not appear after you close it anymore

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ShivKrSingh · Answer 1 · 2013-07-23T02:49:00

you can use this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

C#

$(function () {
       var overlay = $('<div id="overlay"></div>');
       overlay.show();
       overlay.appendTo(document.body);
       $('.popup').show();
       $('.x').click(function () {
           $('.popup').hide();
           overlay.appendTo(document.body).remove();
           return false;
       });
   });

</script>

CSS

#overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    z-index: 100;
    display: none;
}
.cnt223 a
{
    text-decoration: none;
}
.popup
{
    width: 100%;
    margin: 0 auto;
    display: none;
    position: fixed;
    z-index: 101;
}
.cnt223
{
    min-width: 600px;
    width: 600px;
    min-height: 150px;
    margin: -100px 100px 100px 55px;
    background: #f3f3f3;
    position: relative;
    z-index: 103;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #000;
}
.cnt223 .x
{
    float: right;
    height: 35px;
    left: 22px;
    position: relative;
    top: -25px;
    width: 34px;
}
.cnt223 .x:hover
{
    cursor: pointer;
}

XML

<div class='popup'>
    <div class='cnt223'>
        <asp:ImageButton ID="ImageButton1" ImageUrl="~/HR/Controls/images/x.png" runat="server"
            class='x' />

            ///Your coding will go here.            

        </div>
</div>

it will you external resource for jquery from internet. if you want to use it offline you can download and use it inside src.

Hope this will help you.

kesav prakash · Answer 2 · 2013-07-23T02:55:00

Solution 2

<update panel>
<content template>
 
//put Popup control here
 
</content template>
</update panel>




Try this.....

Posted 23-Jul-13 2:55am

kesav prakash

Updated 23-Jul-13 2:56am

v2

Comments

Jerrell77 23-Jul-13 23:43pm

the modalpopup keeps showing after page refresh. can't be solved

Bootstrap Modalpopup on page load

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Bootstrap Modalpopup on page load

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us