html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Alert vs. jQuery dialog box</title>
<!---1-->
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<!---2--->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!---3--->
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!---4--->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script>
</head>
<body bgcolor="#2E9CF1">
<h2>Alert vs. customized jQuery box</h2>
<button id="btnAlert">Click to open Alert box</button>
</br>
</br>
<div style="display:none;" id="JqueryAlert" title="This is the title">Customized jQuery dialog box
</br>
Click any button to close me
</br>
<input placeholder="input 1" id="input1"></input>
<input placeholder="input 2" id="input2"></input>
<img id="somethingFunny" src="http://i.imgur.com/O1Z6kwv.gif" width="100" height="100" />
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
}
#msg{
width:320px;
}
#JqueryAlert{
background-color: #2e9cf1;
}
#somethingFunny{
display: block;
margin-left: auto;
margin-right: auto;
}
.ui-dialog .ui-dialog-buttonpane .button1{
/* changes button according to specofied class */
background: pink;
color: green;
font-size:25px;
}
.ui-dialog .ui-dialog-buttonpane .button2{
/* changes button according to specofied class */
background: green;
color: yellow;
}
.ui-dialog .ui-dialog-buttonpane .button3{
/* changes button according to specofied class */
background: red;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var onLoad = function(selector, callback){
$(selector).each(function(){
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
});
};
var init = function(){
/*onImgLoad("#somethingFunny", function(){
});*/
onLoad('#JqueryAlert', function(){
$(this).fadeIn(700);
$("#btnJqueryAlert").text("Click to open jQuery dialog");
});
var msg = document.getElementById("msg");
// click handler for the javascript alert box
var btnAlert = document.getElementById("btnAlert");
btnAlert.onclick = function(){
if(msg.value.length > 0)
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run