Javascript Alert Alternate with Jquery Message

I am just a learner and don't have clue about javascript and jquery. What I want to ad an adblock detector script. What I found is this piece of code which gives a nasty alert message. What I want is to give an ajaxed message just not a message popping out of screen.

<script type="text/javascript">
function _enabled() {
    alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');
}
function _disabled() {
    alert('not detected');
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = 'disabled';
</script>
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>

Replacing this code can you please help me with an alternate to this code?

{
        alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');
    }

I came along finding some solutions about getting it with jquery or jquery-ui but don't have the knowledge of what to put here and replacing the code. I tried code example from http://m0006.gamecopyworld.com/games/gcw_notice.shtml which gives a nice friendly Adblock Detect message. But it wasn't working at all. Only this Alert Message is working on my website.

Solution

As a very quick alternative, that looks a bit nicer you can use a jQuery-ui dialog (as Ricky Baby said)

You will also need to include the jQuery and jQuery-ui libraries in your page. These can be downloaded from http://jquery.com/download/ and http://jqueryui.com/download/, if you haven't got them already.

You can change the "Hey dude ...... etc" text to what ever you like

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
</head>
<body style='height: 100%;'>
<script type="text/javascript">
function _enabled() 
{
    var html = "<div>Adbloc detected</div>";

    var diag = $(html).dialog(
    {
        autoOpen: true,
        modal: true,
        close: function() { $(this).empty().remove(); },
        buttons: 
        {
            "Close": function() { $(this).dialog("close"); }
        }
    });
}
function _disabled() 
{
    var html = "<div>Adbloc NOT detected</div>";

    var diag = $(html).dialog(
    {
        autoOpen: true,
        modal: true,
        close: function() { $(this).empty().remove(); },
        buttons: 
        {
            "Close": function() { $(this).dialog("close"); }
        }
    });
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = '_disabled';
</script>
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
</body>
</html>

Alternatively you could just put a message at the bottom of the screen if you didn't want a pop up at all

<div id='adBlockDetected' style='position: fixed; bottom: 20px; left: 0px; width: 100%; display: none;' >Hey dide .... etc </div>

Then in the _enabled() function

$("#adBlockDetected").css({display: "block" });