Skip to content

Commit ef217eb

Browse files
glixglix
committed
Modal Style Alert Dialog Plugin For jQuery c_alert
1 parent 463501b commit ef217eb

File tree

5 files changed

+696
-0
lines changed

5 files changed

+696
-0
lines changed

‎Modal-Style-Alert-Dialog-Plugin-For-jQuery-c_alert/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# c_alert
2+
c_alert.js is a jQuery plugin to simply create custom alert.
3+
4+
<h1>Getting started:</h1>
5+
6+
<h3>1. Load jQuery and include c_alert's plugin files</h3>
7+
8+
After you download c_alert, move c_alert.css and c_alert.js to your root's CSS and JavaScript directories.
9+
Next, load jQuery and include c_alert's CSS and JavaScript files inside of your tags:
10+
<pre>
11+
<code>&#x3C;head&#x3E;
12+
...
13+
&#x3C;script src=&#x22;jquery.js&#x22;&#x3E;&#x3C;/script&#x3E;&#x9;
14+
&#x3C;script src=&#x22;c_alert.js&#x22;&#x3E;&#x3C;/script&#x3E;
15+
&#x3C;link href=&#x22;http://fonts.googleapis.com/css?family=Montserrat:400,700&#x22; rel=&#x22;stylesheet&#x22; type=&#x22;text/css&#x22;&#x3E;
16+
&#x3C;link rel=&#x22;stylesheet&#x22; type=&#x22;text/css&#x22; href=&#x22;css/c_alert.css&#x22; /&#x3E;
17+
...
18+
&#x3C;/head&#x3E;</code></pre>
19+
<h3>2. Set up the alert</h3>
20+
This is an example of alert setup, for all values and properties click <a href="#properties">here</a>
21+
<pre>
22+
<code class="js">var options = {
23+
scrollbar: false,
24+
width: "50%",
25+
color: "#ffffff",
26+
font: "'Montserrat', sans-serif",
27+
uppercase: true,
28+
x_toclose: true
29+
}
30+
c_alert_settings(options);
31+
</code>
32+
</pre>
33+
<h3 style="color:#0078c9">3. Manage the alert</h3>
34+
<pre>
35+
<code class="js">/*c_alert have two optional parameters:
36+
-First one: "html" -&#x3E; the simple text or html text that will appear in the alert.
37+
-Second one: "button" -&#x3E; the text for the window button[default: "Ok"], if you put put an empty string for this parameter, there's no button.
38+
If you call the function without both parameters, this will return the text into it.
39+
*/
40+
//Examples
41+
c_alert('Heyyy, this is first example!'); //it will show you the alert with simple text:"Heyyy, this is first example!".
42+
c_alert(); //in this case it will return "Heyyy, this is first example!".
43+
c_alert_close(); //this will close the alert.
44+
</code>
45+
</pre>
46+
for all documentation open documentation.html

‎Modal-Style-Alert-Dialog-Plugin-For-jQuery-c_alert/c_alert.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
var c_alert_opened = false;
2+
var c_settings = {
3+
scrollbar: false,
4+
width: "50%",
5+
color: "#ffffff",
6+
font: "'Montserrat', sans-serif",
7+
uppercase: true,
8+
x_toclose: true,
9+
animation: 'fade'
10+
}
11+
function c_alert_setup() {
12+
$("#c_alert").css({'width':c_settings['width'],'background-color':c_settings['color']});
13+
if(!c_settings['uppercase']) { text_transform = 'none'; } else { text_transform = 'uppercase'; }
14+
$("#c_body_alert").css({'font-family':c_settings['font'],'text-transform':text_transform});
15+
if(!c_settings['x_toclose']) { $("#c_alert_close").hide(); } else { $("#c_alert_close").show(); }
16+
}
17+
function c_alert_settings(options) {
18+
c_settings = $.extend(c_settings, options);
19+
c_alert_setup();
20+
}
21+
function c_alert(html,button) {
22+
html = typeof html !== 'undefined' ? html : '';
23+
button = typeof button !== 'undefined' ? button : 'Ok';
24+
if(html.length == 0) {
25+
return $("#c_body_alert").html();
26+
}
27+
else {
28+
if($("#c_alert:visible").length == 0) {
29+
var window_size = $(window).height();
30+
if($(document).height() > window_size) {
31+
var page_size = $(document).height();
32+
}
33+
else {
34+
var page_size = window_size;
35+
}
36+
$("#c_page_size").height(page_size); //+500 in case of window resize
37+
$("#c_page_size").css('z-index','1');
38+
$("#c_page_size").hide();
39+
$("#c_page_size").css('background-color','rgba(0, 0, 0, 0.5)');
40+
$("#c_page_size").fadeIn();
41+
$("#c_alert").css('top',$("#c_alert").height());
42+
switch(c_settings['animation']) {
43+
case 'fade':
44+
$("#c_alert").fadeIn("slow");
45+
break;
46+
}
47+
$("#c_alert_button").val(button);
48+
}
49+
if(button.length == 0) {
50+
$("#c_alert_button").hide();
51+
}
52+
else {
53+
$("#c_alert_button:hidden").show();
54+
}
55+
$("#c_body_alert").html(html);
56+
c_alert_opened = true;
57+
if(!c_settings['scrollbar']) {
58+
$('html, body').css({
59+
'overflow': 'hidden',
60+
'height': '100%'
61+
});
62+
}
63+
return true;
64+
}
65+
}
66+
function c_alert_close() {
67+
if(!c_settings['scrollbar']) {
68+
$('html, body').css({
69+
'overflow': 'auto',
70+
'height': 'auto'
71+
});
72+
}
73+
$("#c_alert,#c_page_size").fadeOut("fast",function() {
74+
$("#c_page_size").css('background-color','rgba(0, 0, 0, 0)');
75+
$("#c_page_size").css('z-index','-1').fadeIn();
76+
$("#c_body_alert").html('');
77+
c_alert_opened = false;
78+
});
79+
}
80+
$(document).ready(function(){
81+
$('body').prepend('<div id="c_page_size"><div id="c_alert"><div id="c_alert_close" class="c_close_box">x</div><div id="c_body_alert"></div><div id="c_div_alert_button"><input type="button" id="c_alert_button" class="c_alert_btn c_alert_btn-primary" value="Ok" /></div></div></div>');
82+
$("#c_alert_close,#c_alert_button").click(function() {
83+
c_alert_close();
84+
});
85+
c_alert_setup()
86+
});

‎Modal-Style-Alert-Dialog-Plugin-For-jQuery-c_alert/css/c_alert.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
#c_page_size {
2+
z-index: -1;
3+
width: 100%;
4+
height: 100%;
5+
padding: 0;
6+
position: absolute;
7+
top: 0;
8+
}
9+
#c_alert {
10+
display: none;
11+
text-align: center;
12+
border-radius: 5px;
13+
padding: 20px;
14+
position: fixed;
15+
left: 0;
16+
right: 0;
17+
margin-left: auto;
18+
margin-right: auto;
19+
}
20+
.c_close_box {
21+
font-family: 'Montserrat', sans-serif;
22+
position: absolute;
23+
top: 4px;
24+
right: 10px;
25+
font-size: 20px;
26+
color: #c0c0c0;
27+
cursor: pointer
28+
}
29+
#c_body_alert {
30+
padding-top: 7px;
31+
margin-bottom: 10px;
32+
position: relative;
33+
overflow: hidden;
34+
}
35+
#c_alert input[type="button"].cancel {
36+
font-family: 'Montserrat', sans-serif;
37+
text-transform: uppercase;
38+
color: #333;
39+
background-color: #fff;
40+
display: inline-block;
41+
padding: 6px 12px;
42+
margin-bottom: 0;
43+
font-size: 14px;
44+
font-weight: 400;
45+
line-height: 1.42857143;
46+
text-align: center;
47+
white-space: nowrap;
48+
vertical-align: middle;
49+
cursor: pointer;
50+
-webkit-user-select: none;
51+
-moz-user-select: none;
52+
-ms-user-select: none;
53+
user-select: none;
54+
background-image: none;
55+
border: 1px solid #ccc;
56+
border-radius: 4px;
57+
}
58+
#c_alert input[type="button"].cancel:hover {
59+
background-color: #e6e6e6;
60+
border-color: #adadad;
61+
}
62+
#c_alert input[type="button"].cancel:active {
63+
outline: 5px auto -webkit-focus-ring-color;
64+
outline-offset: -2px;
65+
}
66+
#c_alert input[type="button"].active {
67+
font-family: 'Montserrat', sans-serif;
68+
text-transform: uppercase;
69+
color: #fff;
70+
background-color: #428bca;
71+
display: inline-block;
72+
padding: 6px 12px;
73+
margin-bottom: 0;
74+
font-size: 14px;
75+
font-weight: 400;
76+
line-height: 1.42857143;
77+
text-align: center;
78+
white-space: nowrap;
79+
vertical-align: middle;
80+
cursor: pointer;
81+
-webkit-user-select: none;
82+
-moz-user-select: none;
83+
-ms-user-select: none;
84+
user-select: none;
85+
background-image: none;
86+
border: 1px solid #357ebd;
87+
border-radius: 4px;
88+
}
89+
#c_alert input[type="button"].active:hover {
90+
background-color: #3071a9;
91+
border-color: #285e8e;
92+
}
93+
#c_alert input[type="button"].active:active {
94+
outline: 5px auto -webkit-focus-ring-color;
95+
outline-offset: -2px;
96+
}
97+
#c_alert_button {
98+
99+
}
100+
.c_alert_btn {
101+
display: inline-block;
102+
padding: 6px 12px;
103+
margin-bottom: 0;
104+
font-size: 14px;
105+
font-weight: normal;
106+
line-height: 1.42857143;
107+
text-align: center;
108+
white-space: nowrap;
109+
vertical-align: middle;
110+
-ms-touch-action: manipulation;
111+
touch-action: manipulation;
112+
cursor: pointer;
113+
-webkit-user-select: none;
114+
-moz-user-select: none;
115+
-ms-user-select: none;
116+
user-select: none;
117+
background-image: none;
118+
border: 1px solid transparent;
119+
border-radius: 4px;
120+
min-width: 55px;
121+
text-transform: uppercase;
122+
font-family: Montserrat, sans-serif;
123+
}
124+
.c_alert_btn:active {
125+
outline: thin dotted;
126+
outline: 5px auto -webkit-focus-ring-color;
127+
outline-offset: -2px;
128+
background-image: none;
129+
outline: 0;
130+
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
131+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
132+
}
133+
.c_alert_btn:hover {
134+
color: #333;
135+
text-decoration: none;
136+
}
137+
.c_alert_btn.disabled,
138+
.c_alert_btn[disabled] {
139+
pointer-events: none;
140+
cursor: not-allowed;
141+
filter: alpha(opacity=65);
142+
-webkit-box-shadow: none;
143+
box-shadow: none;
144+
opacity: .65;
145+
}
146+
.c_alert_btn-primary {
147+
color: #fff;
148+
background-color: #337ab7;
149+
border-color: #2e6da4;
150+
}
151+
.c_alert_btn-primary:hover,
152+
.c_alert_btn-primary:active,
153+
.c_alert_btn-primary.active{
154+
color: #fff;
155+
background-color: #286090;
156+
border-color: #204d74;
157+
}

0 commit comments

Comments
 (0)