Tuesday 14 May 2013

Custom alert and confirm functions using jQuery and CSS

Left Quote /photos/alert_windows.jpg Every browser renders alert() and confirm() windows differently. If you need to maintain your design across the whole website, you'll need to implement a fully-custom replacement for the standard JavaScript windows.

Here's how.

First, the basic HTML for the page. We'll need one external CSS file, one external JavaScript file, and jQuery. The pop-up window is actually two separate divs. The first is a full-screen background div at 50% opacity, to make the page darker and prevent the user from clicking on anything else. The second is the window itself, centred on the page.

If we just nested these divs, the 50% opacity would apply to all the child divs too, so we make "alertbg" our background div, and "messagefg" the foreground. I want the box centered on the page, so instead of positioning it manually, I've added an extra "centered" div.

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="jquery-1.7.1.js"></script>

    <script type="text/javascript" src="functions.js"></script>

  </head>



  <body>

    <!-- page content here -->



    <div id="alertcontainer">

      <div id="alertbg"></div>

      <div id="messagefg">

        <div align="center">

          <div></div>

        </div>

      </div>

    </div>



  </body>

</html>

And the CSS

#alertcontainer { display: none; }



#alertbg {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background: black;

  opacity: 0.50;

}



#messagefg {

  position: fixed;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  z-index: 5000;

  display: none;

}



#messagefg div div {

  width: 500px;

  position: fixed;

  top: 30%;

  left: 50%;

  margin-left: -250px;

  border: 2px solid white;

  border-radius: 5px;

  text-align: left;

  font-size: 15px;

  color: #505050;

  font-weight: bold;

  box-shadow: 2px 2px 5px #888;

  padding: 0 10px 0 15px;

  background: #c0c0c0;

}



#messagefg div div p.userapprovebuttons {

  margin-top: 0;

  padding: 0;

  text-align:right;

}

Looks a bit OTT, but is really just a couple of fixed position divs. I'm fixing the position to keep everything still if the user resizes the screen or clicks the scrollbars.

Now for the JavaScript. When triggered, this function displays the background and the foreground, and adds an HTML message to the window. The callback function handles the user response, either true or false.

function userApprove(str, options, callback) {



  if (options=="YN") htmldata = str+"<p class='userapprovebuttons'><input type='button' 

value='Yes' id='YesButton'> <input type='button' value='No' id='NoButton'></p>";

  else if (options=="OK") htmldata = str+"<p class='userapprovebuttons'><input type=

'button' value='OK' id='YesButton'></p>";



  $("#alertcontainer").css("display", "block");

  $("#messagefg div div").html(htmldata);

  $("#messagefg").css("display", "block");



  $("#YesButton").one("mouseup", function() {

    stopAlert();

    callback(true);

  });



  $("#NoButton").one("mouseup", function() {

    stopAlert();

    callback(false);

  });

}

Once the user has clicked on one of the buttons, we can hide the two divs again.

function stopAlert() {

  $("#messagefg").css("display", "none");

  $("#alertcontainer").css("display", "none");

}

Of course, we'll also need something to trigger these windows, so we'll add the following to the HTML

<a href="http://www.google.com" onClick="return customAlert();">Custom Alert</a>

<a href="" onClick="customConfirm(function(result) { if (result) window.location='

http://www.google.com'; }); return false;">Custom Confirm</a>

and to the JavaScript file:

function customAlert() {

  userApprove("<h1>Access Denied</h1><p>You do not have access to this page</p>", "OK", 

function() { });

  return false;

}



function customConfirm(callback) {

  userApprove("<p>Are you sure?</p>", "YN", function(result) { callback(result); });

}

And there you have it. Fully CSS-customisable cross-browser-standard substitutes for the outdated alert() and confirm() functions.

Full demo - www.captainash.com/demo Right Quote

>> Posted in Websites at 18:05, and viewed 51,314 times

Next article: Half Marathon Training Programme (13 September 2014)

Next Websites article: Regex cheat sheet (08 December 2015)

Name
Comments
Question	2 * 4 = (this security question stops automated submissions)

Tuesday 14 May 2013

Custom alert and confirm functions using jQuery and CSS

Comments

About Me ...

Archive

Subjects

Search


Life, according to ash