Question

3

Automatically open modal only one time in whole website in javascript

rated 0 times [ 5] [ 2] / answers: 1 / hits: 16540 / 9 Years ago, wed, january 20, 2016, 12:00:00

I am using java, java script and bootstrap to open the modal. But i want this modal only one time if user click to cancel then it should not appear or it should not display after page reloading.

HTML:

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>

<div id=myModal class=modal fade>

    <div class=modal-dialog>

        <div class=modal-content>

            <div class=modal-header>

                <button type=button class=close data-dismiss=modal aria-hidden=true>×</button>

                <h4 class=modal-title>Subscribe our Newsletter</h4>

            </div>

            <div class=modal-body>

                <img src=https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD>



            </div>

        </div>

    </div>

</div>

JAVA SCRIPT:

$(document).ready(function(){

            setTimeout(function(){

        $(#myModal).modal('show');

    },3000);

    });

I have seen one more link, But i did not get idea. Link is:Get cookie by name

In my code modal show in a page But when reload the page it will come. Whenever reload the page it will comes. But i want user cancel the modal then it should not come in whole website. I will put this modal in header of the website because header is same for all the pages. My website is https://www.winni.in

I want modal only one time in my website. If user land in any page first time modal should be display.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

collinisaaka

Add To Favorites

Follow

Total Points: 194

Total Questions: 105

Total Answers: 104

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

collinisaaka questions

1 Compare two arrays of objects, and remove if object value is equal

Wed, Mar 2, 22, 00:00, 2 Years ago

1 REACTJS giving the following error: TypeError: navigate.push is not a function

Tue, Nov 23, 21, 00:00, 3 Years ago

1 ReferenceError: Cannot access before initialization circular dependency

Fri, Jul 9, 21, 00:00, 3 Years ago

1 React Hook useEffect to fetch data from local json file to create a details page

Tue, Sep 15, 20, 00:00, 4 Years ago

1 create a curved bottom navigation (before after implementation)

Wed, Jul 1, 20, 00:00, 4 Years ago

View All

answered 9 Years ago kristopher · Accepted Answer

You need something to hold the status of modal opening, you should be able to use local storage to do so, however cookie would be more trouble-free in most cases.

See below for a code sample:

    $(document).ready(function(){

            setTimeout(function(){

            if(!Cookies.get('modalShown')) {

                $(#myModal).modal('show');

              Cookies.set('modalShown', true);

            } else {

                alert('Your modal won't show again as it's shown before.');

            }



    },3000);

 });

Runnable online example: http://jsfiddle.net/z3bh5gh2/2/

Update:

I recommend to use this plugin to create modals: https://github.com/nakupanda/bootstrap3-dialog

This example doing the same thing using BootstrapDialog as your example does, but the code looks more clean and neat:

$(document).ready(function(){

setTimeout(function(){

    BootstrapDialog.show({

    title: 'Subscribe our Newsletter',

    message: '<img src=https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD>'

  });   

},3000);

});

And again, here is an online example http://jsfiddle.net/n7mkLoko/1/