How to Create and Apply CSS to JavaScript Alert

How to create and apply CSS to javascript Alert

You cannot. alert() simply shows a native message box, so it'll look however the OS makes it look.

In general, you shouldn't be using alert boxes because they are annoying and they block the entire browser.* You could always create a fake alert box with JavaScript that achieves the same effect. You could then style it however you want with normal CSS. If you use jQuery, there's SimpleModal (demos).

^{* Modern browsers tend to only block the window that spawned the alert, but they're still annoying and you still shouldn't use them. :)}

How to change the style of alert box?

The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Dialogue does a lot of the work for you, working basically as I have described: Link.

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>jQuery UI Dialog - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <link rel="stylesheet" href="/resources/demos/style.css">  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <script>  $( function() {    $( "#dialog" ).dialog();  } );  </script></head><body> <div id="dialog" title="Basic dialog">  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div>  </body></html>

JavaScript & HTML Custom Alert Box

There were two main problems:

You were creating the dialog <div /> but you weren't actually appending it to the document
You were defining alert but you weren't actually calling it anywhere

I've fixed these two things in the below snippet:

function alert(title, content) {
  var alertContent = `
    <div class="modal__overlay verdana">
      <div class="modal__window">
        <div class="modal__titlebar">
          <span class="modal__title">${title}</span>                        
          <button class="modal__close">X</button>                    
        </div>                     
        <div class="modal__content">${content}</div>
      </div>
    </div>`
  var dialogBox = document.createElement("div");
  dialogBox.innerHTML = alertContent;
  document.body.appendChild(dialogBox); // actually append it
}

alert('hello', 'hello world'); // call it here

.verdana {
  font-family: Verdana;
}

.modal__overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000000000000000;
}

.modal__window {
  max-width: 500px;
  background: #ffffff;
  border: 1px solid #ffffff;
  font-size: 16px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

.modal__titlebar {
  height: 40px;
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__title {
  margin-left: 15px;
  font-weight: bold;
  color: #eeeeee;
}

.modal__close {
  width: 40px;
  height: 40px;
  outline: none;
  border: none;
  background: transparent;
  color: #eeeeee;
  cursor: pointer;
}

.modal__close:active {
  transform: scale(0.9);
}

.modal__content {
  padding: 15px;
  font-size: 0.9em;
}

How do I style the alert box with CSS?

Try jQuery UI located here: http://jqueryui.com/demos/dialog/

They have a theme roller where you can style the dialog and modal boxes.

-- EDIT --

Answering your second question.

Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

How javascript alert a css value?

You need to use getComputedStyle(). .style is use to set a new value for target element.

var div     = document.getElementById("box"), // element    divCSS  = window.getComputedStyle(div), // element CSS     bgColor = divCSS.getPropertyValue('background-color'); // property

document.getElementById("box").onclick= function() {    alert(bgColor);}

#box{  height: 100px;  width: 100px;  background-color: blue;  margin: 0px;  display: inline-block;}

<div id="box" class="box"></div>

How to Create and Apply CSS to JavaScript Alert