CODEWITHSUNDEEP
javascriptjquery
Satch3000
Satch3000

Reputation: 49404

Javascript alert message Alternative

On my online page I have a simple alert message. I basically need to change the title but I've read that I cannot do that.

Here's the code:

<script>alert("My Message Here");</script>

In the alert message I get the url of my website and then the message under it.

What is the quickest alternative to having a javascript alert?

Thanks

Upvotes: 18

Views: 60509

Answers (4)

HoldOffHunger
HoldOffHunger

Reputation: 20901

This can be done relatively easy, without too much code, and with the feature of fading in/out. The below example fades in and out at a rate of 3 seconds per fade, but this can be changed by modifying the fadetime variable and the 3s parameter of the CSS definition transition: opacity 3s;.

Besides the ability to have fading, the advantage of this answer is that it should be extremely easy to use when making a really customized version. This solution does not emphasize CSS or styling, I hope it emphasizes the functionality desired.

const fadetime = 3000;

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById('message-box-creator').addEventListener('click', function(ev) {
      document.body.classList.add('disabled-body');
      fadeInElement(document.getElementById('message-box'));
  });
  
  document.getElementById('close-message-box').addEventListener('click', function(event) {
    document.body.classList.remove('disabled-body');
    fadeOutElement(document.getElementById('message-box'));
  });
    
            // Fading
            // -------------------------------------------------
    
    function fadeInElement(element) {
        element.style.removeProperty('display');
        
        setTimeout(function() {
            element.classList.remove('fade');
        }, 10);
        
        return true;
    }
    
    function fadeOutElement(element) {
        element.classList.add('fade');
        
        setTimeout(function() {
            element.style.display = 'none';
        }, fadetime);
        
        return true;
    }
});
#message-box {
    top:2%;
    
    left:10%;
    width:80%;
    
    border: 1px solid black;
    background-color:#FFFFFF;
    position:absolute;
    z-index:10000;
}

.disabled-body {
    background-color: rgba(0,0,0,0.5);
}

.fadeable {
    opacity: 1;
    transition: opacity 3s;
}

.fade {
    opacity: 0 !important;
}
<body>
<div id="message-box" class="fadeable fade" style="display:none;">
<b>Note:</b> Message-box has been activated!<br><br>

<button id="close-message-box">Close</button>
</div>

<button id="message-box-creator">Create Alert</button>
</body>

Bonus: A function for disabling buttons on the page when doing an alert:

function disableAllButtons() {
    const buttons = document.getElementsByTagName('button');
    
    for (const button of buttons) {
        button.disabled = true;
    }
    
    document.getElementById('close-message-box').disabled = false;
    
    return true;
}

Run this function within the event listener for displaying the message (and the reverse for clicking close), do the same for input and submit, and you should have a fully disabled page.

Upvotes: 0

Thorsten Staerk
Thorsten Staerk

Reputation: 1156

If you quickly want to output debugging information, just write it into a div element. For example to write width and height when resizing the window:

    window.onresize = function(event) 
    {
      document.getElementById("debug").innerHTML=window.innerWidth+"x"+window.innerHeight;
    }
    <html>
    <div id="debug">
      Resize your Window to start.
    </div>
    </html>

Upvotes: 3

sorrymissjackson
sorrymissjackson

Reputation: 2715

I like this one a lot: http://t4t5.github.io/sweetalert/

It does not depend on any other JavaScript library and is highly customizable. Supports different kinds of message pop-ups, implements a prompt pop-up and allows message chaining.

Upvotes: 12

Rory McCrossan
Rory McCrossan

Reputation: 337626

The alternative is a javascript 'modal window'. Having a google for that should turn up a plethora of options.

This method enables you to style a div however you like and to have that shown in place of the alert box. If you've ever seen a lightbox, the effect and idea is very similar.

They are all very easy to implement. Most often just requiring the inclusion of the script, some CSS and a line of jquery to initialise the modal window on the specific DIV.

Upvotes: 3

Related Questions