by nolovelust
19. December 2010 13:38
Sample One
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<style type='text/css'>
#popup{
display: none;
position: absolute;
left: 100px;
top: 100px;
background-color: #ffffdd;
border: 1px solid #888;
padding: 5px;
cursor: pointer;
}
#title{
font-weight: bold;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("a").click(function(evt) {
var title = $(this).data('title');
var msg = $(this).data('msg');
var top = evt.pageY + 3;
var left = evt.pageX + 3;
showPopup(top, left, title, msg);
});
$("#popup").click(function() {
$(this).hide();
});
});
function showPopup(top, left, title, msg) {
$("#title").html(title);
$("#msg").html(msg);
$("#popup").css({
top: top,
left: left
}).show();
}
});
//]]>
</script>
</head>
<body>
<a href='#' data-title='Alert' data-msg='This is my message'>alert</a>
<div id="popup">
<div id="title"></div>
<div id="msg"></div>
</div>
</body>
</html>
Sample Two
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>window.alert = function() {
jQuery('<div></div>', { html: arguments[0].replace(/\n/, "<br />") }).dialog({title:'Alert'});
};</script>
<title>Test Page</title>
</head>
<body>
<a href="#" onclick="alert('test');return false;">Custom Alert</a>
</body>
</html>
from http://stackoverflow.com/questions/4483088/can-jquery-replace-default-javascript-alert-or-confirm/
Subscribe