overriding the javascript ALERT to jquery dialog
Question
I was trying to do the magic and turn all of my platform javascript alerts to jquery dialog, I followed the following scripts
<div id="overrideAlert"></div>
<script>
window.alert = function(message) {
$('#overrideAlert').text(message).dialog({
modal:true,
title:'Message',
buttons: {
'OK':function(){
$(this).dialog('close');
}
}
});
};
</script>
But no luck.
Is there a clean solution for this? Thanks,
4 answers
solution1
8 ACCPTED 2013-05-01 03:06:09
I would prefer a dynamic div instead
$('<div />').text(message).dialog({
modal:true,
title:'Message',
buttons: {
'OK':function(){
$(this).dialog('close');
}
},
close:function(){ $(this).dialog('destroy').remove(); }
});
solution2
3 2013-05-01 03:01:56
It just works.
Check at the jsfiddle demo .
Note: you can't call alert('foo'); directly inside the <head> 's <script> tags, because the div element is not ready on the dom.
solution3
0 2013-05-01 04:39:23
Your code looks fine, but make sure that you add jquery and jquery-ui libraries to your page.
Demo: Plunker
solution4
-1 2014-08-26 06:06:15
If we are submitting page before alert is going automatically. some saved successfully messages there but not asking for "ok". I have done overriding of alert.any suggestion. window.alert = function(message, fallback){
$(document.createElement('div')).attr({title: 'Alert', 'class': 'alert'}).html(message).dialog({
buttons: {OK: function(){$(this).dialog('close'); callback()}},
autoOpen: true,
close:function(){$(this).remove();},
draggable: true,
modal: false,
resizable: false,
height:'auto',
width: 'auto'
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.