CODEWITHSUNDEEP
javascripthtmlcss
M.Jay
M.Jay

Reputation: 21

How to close an alert without going back to index.html?

I have created a small website using this template. I also added an alert message on the top that appears automatically when the website is opened: 

.alert {
    padding:5px;
    background-color:black;
    color:white;
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
}

.close {
    color:white;
    float:right;
    font-size:20px;
    line-height:10px;
    cursor:pointer;
}


    <div class="alert">
        <span class="close" onclick="this.parentElement.style.display='none';">&times;</span>
        <p style="text-align: center;">Message</p>
    </div>

The problem is that if you open a page, let's say "Contact", and then decide to close the alert message, you'd go back to index.html. How can I prevent this and allow the user to stay on the same page after the alert message has been closed?

Upvotes: 1

Views: 122

Answers (1)

gwesseling
gwesseling

Reputation: 483

The main.js file contains a piece of code that will hide the article when you click outside the article (#main).

$body.on('click', function(event) {

                // Article visible? Hide.
                    if ($body.hasClass('is-article-visible'))
                        $main._hide(true);

            });

So to prevent your alert from going back to the main page by canceling the click function of the #main on clicking the cancel button.

                    $(".close,.alert").on('click', function(event) {
                        event.stopPropagation();
                    });

This code should work as far as I can tell. Please include a https://jsfiddle.net/ or a http://codepen.io/pen/ with your code. So we can test or solution before giving you an answer without downloading the template and adding your code.

Upvotes: 2

Related Questions