-
Notifications
You must be signed in to change notification settings - Fork 11
/
readme.txt
209 lines (152 loc) · 8.05 KB
/
readme.txt
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
Corner Popup v1.31 - 27/12/2023
Author: Łukasz Brzostek
Website: https://espritdesign.pl/corner-popup
GitHub: https://github.com/lukasz-brzostek/corner-popup
------------------------------
1. Overview
2. How to use
3. License
4. Contact
------------------------------
-----------
1. Overview
-----------
What is Corner Popup? It's a simple pop-up component that can be used
on almost all modern websites. It simply displays small pop-up box
in corner of the browser. Corner Popup is fully configurable and you
can change many parameters - position, window color, content inside
etc. Corner Popup is easy to use and you don't need programming skills.
As a component Corner Popup needs only jquery to work. It is fully
responsive without using any framework.
-------------
2. How to use
-------------
Using Corner Popup is very simple. As the first step, add jquery
and Corner Popup files for the project (remember to add appropriate
files to folders):
<link rel="stylesheet" href="css/corner-popup.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/corner-popup.min.js"></script>
As step 2 call script from your website code:
<script>
$.fn.cornerpopup({});
</script>
In step 3 you can (but it's not necessary) set some options
in previously added code:
<script>
$.fn.cornerpopup({
variant: 1,
slide: 1
});
</script>
---------------------------------------
All available options with description:
---------------------------------------
Option Default Description
------ ------- -----------
active true Makes popup enabled or disabled. If it is set
to 1 popup will show. If set to 0 it's disabled.
displayOnce false If this option is set to 1, the popup will be
displayed only once (which is stored in browser memory).
variant 1 Using this option you can set a variant of the
popup window. There are 10 variants which could be used
for different purposes - for example variant 2 is an
option used for cookies information - it even creates
and saves cookie for you.
slide false If this option is set to 1 standard method of showing
a popup (fade) will change to slide.
slideTop false This option could be used only if "slide" is set to 1.
It makes slide always work from bottom to top.
delay 0 This option sets delay to popup. It will appear after
the amount of time you set as parameter (in milliseconds).
timeOut 0 This option sets the timeout to popup, so it will appear
and disappear after the amount of time you set as parameter.
If you set for example 500 it will disappear after 500ms.
closeBtn true Sets close button visibility - if it is set to 0 close button
will not show in any variant of the popup.
shadow true Sets popup shadow visibility - if it is set to 0 shadow won't
be visible in any variant of the popup.
link1 You can change the link that is used in variant 1 of popup.
Just type a new address as first parameter and target as
second - e.g. link1: "https://espritdesign.pl, _blank".
link2 # You can change the link that is used in most of popup variants.
Just type a new address as first parameter and target as
second - e.g. link1: "https://espritdesign.pl, _blank".
popupImg You can change the image used in popup variant 1.
Type your own link to image here.
cookieImg You can change the image used in popup variant 2 (cookies).
Type your own link to image here.
messageImg You can change the image used in popup variant 3 (message).
Type your own link to image here.
header In this option you can change header used in some of
popup variants. You can use html tags here.
text1 In this 2 options you can change text used in popup variants
- text1 is for cookie message. You can use html tags here.
button1 In this 3 options you can change label used in the buttons.
button2 "button2" is used in cookies popup.
button3
content You can place in this option text (including html tags) which
is displayed in variant nr.10 of popup - this variant is made
to show your own content.
loadContent false This option loads data from another file (e.g. html file with
prepared content). Just write the file address as parameter.
width 390px This option is used to change the popup width.
Use here css units.
font This option is used to change the font used in popup elements.
Use here css code - e.g. "'Open Sans', 'Halvetica', sans-serif".
colors #543189 This option changes color of primary elements - close button
icon, headers, buttons.
bgColor #fff This option changes background color of popup.
borderColor #efefef This option changes border color of popup.
textColor #181818 This option changes text color in popup.
iconColor #543189 This option changes close button color.
btnColor #543189 This option changes color of buttons in popup.
btnTextColor #fff This option changes color of text in buttons.
corners 0px This option is used to change popup corner radius.
padding 0 This option is used to change padding inside of the popup.
You can change it to any value.
position right This option is used to change position of the popup.
You can change position to left, center or right.
escClose false Closes pop-up window after Escape key is pressed.
This option works if it is set to 1.
topCorner false Makes the pop-up appear at the top of the browser window.
Works if it is set to 1.
stickToBottom false Removes the pop-up margin and makes it stick to the
edge of the browser. Works if it is set to 1.
--------------------------------------------------
Corner Popup provides public methods (e.g. usage):
--------------------------------------------------
$.fn.cornerpopup.popupClose();
Method Description
------ -----------
popupClose Closes pop-up window whenever you want.
popupHide Hides pop-up window (it can be restored at any time).
popupShow Shows hidden pop-up window.
You can add delay for each method. Just call the method like this:
$.fn.cornerpopup.popupShow(100); - where 100 is the time in milliseconds.
--------------------
Corner Popup events:
--------------------
<script>
$.fn.cornerpopup({
variant: 1,
beforePopup: function() {
// Your code here
}
</script>
Event Description
----- -----------
beforePopup Your code will work before the popup window appears.
afterPopup Your code will work after closing the pop-up window.
onBtnClick Your code will work after pressing the popup button.
onCloseBtnClick Your code will work after pressing close button.
----------
3. License
----------
Corner Popup is licensed under the Creative Commons Attribution 4.0
International License: https://creativecommons.org/licenses/by/4.0
----------
4. Contact
----------
Have a question about usage? Found a bug?
Feel free to write a message to me: [email protected]