API tools faq
paste
Advertisement
izuemis

cr superjake45 & angeidiarys pop up

izuemis
Mar 31st, 2023
399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.27 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <script src="https://web.archive.org/web/20220429062709js_/https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  3. <script>
  4. $(document).ready(function(){
  5. $('.n01,.fade1').click(function() {
  6. $('#pop1').fadeToggle();
  7. });
  8. });
  9. </script>
  10. <script>
  11. $(document).ready(function(){
  12. $('.n02,.fade2').click(function() {
  13. $('#pop2').fadeToggle();
  14. });
  15. });
  16. </script>
  17. <script>
  18. $(document).ready(function(){
  19. $('.n03,.fade3').click(function() {
  20. $('#pop3').fadeToggle();
  21. });
  22. });
  23. </script>
  24.  
  25. <style>
  26.  
  27. #pop1 {
  28. width:100%;
  29. height:100%;
  30. top:0;
  31. left:0;
  32. position:fixed;
  33. z-index:999;
  34. background:rgba(255,255,255,.5); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  35. display:none;
  36. }
  37.  
  38. .fade1 {
  39. top:0;
  40. left:0;
  41. position:fixed;
  42. z-index:1000;
  43. width:100%;
  44. height:100%;
  45. }
  46.  
  47. #pop2 {
  48. width:100%;
  49. height:100%;
  50. top:0;
  51. left:0;
  52. position:fixed;
  53. z-index:999;
  54. background:rgba(255,255,255,.5); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  55. display:none;
  56. }
  57.  
  58. .fade2 {
  59. top:0;
  60. left:0;
  61. position:fixed;
  62. z-index:1000;
  63. width:100%;
  64. height:100%;
  65. }
  66.  
  67. #pop3 {
  68. width:100%;
  69. height:100%;
  70. top:0;
  71. left:0;
  72. position:fixed;
  73. z-index:999;
  74. background:rgba(255,255,255,.5); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
  75. display:none;
  76. }
  77.  
  78. .fade3 {
  79. top:0;
  80. left:0;
  81. position:fixed;
  82. z-index:1000;
  83. width:100%;
  84. height:100%;
  85. }
  86.  
  87. .popup1 {
  88. top:42%;
  89. left:50%;
  90. transform:translate(-50%,-50%);
  91. position:fixed;
  92. background:#fff; /* background of popup box */
  93. padding:12px; /* padding of popup box */
  94. z-index:10000;
  95. width:300px; /* width of popup */
  96. border:1px solid #a9c2d4; /* popup border */
  97. border-radius: 6px;
  98. font-family: Pixelated MS Sans Serif;
  99. font-size: 12px;
  100. text-align: left;
  101. line-height: 1.25em;
  102. }
  103.  
  104. .popup2 {
  105. top:60%;
  106. left:50%;
  107. transform:translate(-50%,-50%);
  108. position:fixed;
  109. background:#fff; /* background of popup box */
  110. padding:12px; /* padding of popup box */
  111. z-index:10000;
  112. width:300px; /* width of popup */
  113. border:1px solid #a9c2d4; /* popup border */
  114. border-radius: 6px;
  115. font-family: Pixelated MS Sans Serif;
  116. font-size: 12px;
  117. text-align: left;
  118. line-height: 1.25em;
  119. }
  120.  
  121. .popup3 {
  122. top:42%;
  123. left:50%;
  124. transform:translate(-50%,-50%);
  125. position:fixed;
  126. background:#fff; /* background of popup box */
  127. padding:12px; /* padding of popup box */
  128. z-index:10000;
  129. width:300px; /* width of popup */
  130. border:1px solid #a9c2d4; /* popup border */
  131. border-radius: 6px;
  132. font-family: Pixelated MS Sans Serif;
  133. font-size: 12px;
  134. text-align: left;
  135. line-height: 1.25em;
  136. }
  137.  
  138. .popup4 {
  139. top:60%;
  140. left:50%; transform:translate(-50%,-50%);
  141. position:fixed;
  142. background:#fff; /* background of popup box */
  143. padding:12px; /* padding of popup box */
  144. z-index:10000;
  145. width:300px; /* width of popup */
  146. border:1px solid #a9c2d4; /* popup border */
  147. border-radius: 6px;
  148. font-family: Pixelated MS Sans Serif;
  149. font-size: 12px;
  150. text-align: left;
  151. line-height: 1.25em;
  152. }
  153.  
  154. .popup5 {
  155. top:38%;
  156. left:50%;
  157. transform:translate(-50%,-50%);
  158. position:fixed;
  159. background:#fff; /* background of popup box */
  160. padding:12px; /* padding of popup box */
  161. z-index:10000;
  162. width:300px; /* width of popup */
  163. border:1px solid #a9c2d4; /* popup border */
  164. border-radius: 6px;
  165. font-family: Pixelated MS Sans Serif;
  166. font-size: 12px;
  167. text-align: left;
  168. line-height: 1.25em;
  169. }
  170.  
  171. .popup6 {
  172. top:58%;
  173. left:50%;
  174. transform:translate(-50%,-50%);
  175. position:fixed;
  176. background:#fff; /* background of popup box */
  177. padding:12px; /* padding of popup box */
  178. z-index:10000;
  179. width:300px; /* width of popup */
  180. border:1px solid #a9c2d4; /* popup border */
  181. border-radius: 6px;
  182. font-family: Pixelated MS Sans Serif;
  183. font-size: 12px;
  184. text-align: left;
  185. line-height: 1.25em;
  186. }
  187.  
  188. @media (max-width: 1000px) {
  189. .popup1 {
  190. top:40%;
  191. }
  192.  
  193. .popup2 {
  194. top:63%;
  195. }
  196.  
  197. .popup3 {
  198. top:41%;
  199. }
  200.  
  201. .popup4 {
  202. top:63%;
  203. }
  204.  
  205. .popup5 {
  206. top:37%;
  207. }
  208.  
  209. .popup6 {
  210. top:59%;
  211. }
  212. }
  213.  
  214. .icon {
  215. font-family: 'icons';
  216. font-size: 1em;
  217. color: #a9c2d4;
  218. }
  219.  
  220. .icon2 {
  221. font-family: emoji font;
  222. font-size: 1.25em;
  223. color: #a9c2d4;
  224. }
  225.  
  226. .title {
  227. background: -webkit-linear-gradient(-90deg, #a9c2d4 30%, #b4cdd6 70%, #FFFFFF 95%);
  228. -webkit-background-clip: text;
  229. -webkit-text-fill-color: transparent;
  230. font-weight: bold;
  231. font-size: 1.5em;
  232. }
  233.  
  234. </style>
  235.  
  236. <body>
  237. <div id="pop1">
  238. <div class="fade1"></div>
  239. <div class="popup1">
  240. <span class="icon">Q</span>
  241. <span class="title"> Before You Follow</span> <hr style="border: 0.75px solid #a9c2d4;">
  242. <span class="icon">3</span> info info info info <br/>
  243. <span class="icon">3</span> info info info info info info info info info <br/>
  244. <span class="icon">3</span> info info info info info info info info info info info <br/>
  245. <span class="icon">3</span> info info info info info info info info info <br/>
  246. <span class="icon">3</span> info info info info info info info info info <br/>
  247. </div>
  248.  
  249. <div class="popup2">
  250. <span class="icon">Q</span>
  251. <span class="title"> Notes</span> <hr style="border: 0.75px solid #a9c2d4;">
  252. <span class="icon">3</span> info info info info info info info info info <br/>
  253. <span class="icon">3</span> info info info info info info info info info <br/>
  254. <span class="icon">3</span> info info info info info info info info info <br/>
  255. <span class="icon">3</span> info info info info info info info info info <br/>
  256. </div></div>
  257.  
  258. <div id="pop2">
  259. <div class="fade2"></div>
  260. <div class="popup3">
  261. <span class="icon">m</span>
  262. <span class="title"> Guidelines</span> <hr style="border: 0.75px solid #a9c2d4;">
  263. <span class="icon">4</span> info info info info info info info info info <br/>
  264. <span class="icon">4</span> info info info info info info info info info info info <br/>
  265. <span class="icon">4</span> info info info info info info info <br/>
  266. <span class="icon">4</span> info info info info info info info info info <br/>
  267. <span class="icon">4</span> info info info info <br/>
  268. </div>
  269.  
  270. <div class="popup4">
  271. <span class="icon">m</span> <span class="title"> Notes</span> <hr style="border: 0.75px solid #a9c2d4;">
  272. <span class="icon">4</span> info info info info info info info <br>
  273. <span class="icon">4</span> info info info info info info info info info info info <br>
  274. <span class="icon">4</span> info info info info info <br>
  275. </div></div>
  276.  
  277. <div id="pop3">
  278. <div class="fade3"></div>
  279. <div class="popup5">
  280. <span class="icon">P</span> <span class="title"> Love Zone</span> <hr style="border: 0.75px solid #a9c2d4">
  281. <span class="icon2">C</span> info info info info info info info info info info info </br>
  282. <span class="icon2">C</span> info info info info info info info info info info info </br>
  283. <span class="icon2">C</span> info info info info info info info info info info info </br>
  284. </div>
  285.  
  286. <div class="popup6">
  287. <span class="icon">P</span>
  288. <span class="title"> Music </span> <hr style="border: 0.75px solid #a9c2d4;">
  289. <span class="icon2">s</span> info info info info info info info info info </br>
  290. <span class="icon2">s</span> info info info info info info info info info </br>
  291. <span class="icon2">s</span> info info info info info info info info info </br>
  292. <span class="icon2">s</span> info info info info info info info info info </br>
  293. </div></div>
  294. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!