Question

I am a beginner in jQuery and I want to built a simple jQuery alert window without using the jQuery UI package, I saw some plugin on line, but I am trying to built it from scratch, what I want is that when a button gets clicked, it comes up an alert window with ok and cancel button in it, and when click ok go to another action like navigate to a link and cancel just close the window. if anyone could show me a quick code example so that I got some idea how to do it would be great, thanks for help.

So I assume the html code structure probably like this:

 <input type = "button" value="show alert">

<script>
 $("input").click(function(){
   )};
 </script>

Answer 1

You have to write your own CSS but here is an example;

HTML:

<input type="button" id="redirect" value="show alert" />
<div id="alertWindow">
    You'll be redirect to google.com. Continue?
    <br /><br />
    <input type="button" id="btnOk" value="OK" /> <input type="button" id="btnCancel" value="Cancel" />
</div>

CSS:

#alertWindow {
  display: none;
  text-align: center;
  border: 1px solid #333;
  width: 200px;
  height: 80px;
  border-radius: 5px;
  padding: 10px;
}
#btnOk, #btnCancel { width: 70px; }

And finally Javascript:

$(function() {
    $("#redirect").click(function(){
      $('#alertWindow').show();
      return false;
    });
    $('#btnCancel').click(function() {
        $('#alertWindow').hide();
    });
    $('#btnOk').click(function() {
        location.href = 'http://www.google.com';
        return false;
    });
});

Here is a working copy of this code on jsFiddle