API tools faq
paste
Advertisement
suoh--chan

pop up code

suoh--chan
Mar 22nd, 2016
171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.14 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!------------------------TOOLTIPS SCRIPT--------------------->
  4.  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  6. <script>
  7. $(document).ready(function() {
  8. //
  9. $('a.poplight[href^=#]').click(function() {
  10. var popID = $(this).attr('rel'); //Get Popup Name
  11. var popURL = $(this).attr('href'); //Get Popup href to define size
  12. var query= popURL.split('?');
  13. var dim= query[1].split('&');
  14. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  15. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  16. var popMargTop = ($('#' + popID).height() + 80) / 2;
  17. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  18. //Apply Margin to Popup
  19. $('#' + popID).css({
  20. 'margin-top' : -popMargTop,
  21. 'margin-left' : -popMargLeft
  22. });
  23. $('body').append('<div id="fade"></div>');
  24. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  25. return false;
  26. });
  27. $('a.close, #fade').live('click', function() {
  28. $('#fade , .popup_block').fadeOut(function() {
  29. $('#fade, a.close').remove(); //fade them both out
  30. });
  31. return false;
  32. });
  33. });
  34. </script>
  35.  
  36. <!-------------------------------------------------------------------->
  37.  
  38. <style type="text/css">
  39.  
  40. /*---- P O P U P ---*/
  41. .popup_block{
  42. display:none;
  43. background:#3c3c3c;
  44. background-image:url('https://40.media.tumblr.com/b5b16e084268b629b8fb715bdf038f75/tumblr_inline_o4ihufFgjb1tmr6hp_540.png');
  45. background-repeat:no-repeat;
  46. border:2px solid #d9d9d9;
  47. text-align:center;
  48. padding:20px;
  49. height:540px;
  50. float:left;
  51. position:fixed;
  52. top:53%;left:50%;
  53. z-index: 99999;
  54. -webkit-box-shadow: 0px 0px 6px #000; /* delete for solid white */
  55. -moz-box-shadow: 0px 0px 6px #000; /* delete for solid white */
  56. box-shadow: 0px 0px 6px #000; /* delete for solid white */
  57. }
  58.  
  59. *html #fade {position: absolute;}
  60. *html .popup_block {position: absolute;}
  61. #fade {
  62. display:none;
  63. position:fixed;
  64. left:0px;
  65. top:0px;
  66. width:100%;
  67. height:100%;
  68. z-index:9999;
  69. background:#000;
  70. opacity:0.5;
  71. }
  72.  
  73. #lore{
  74. padding: 6px;
  75. background-color: #fff;
  76. opacity:0.7;
  77. border: 2px solid #d9d9d9;
  78. }
  79.  
  80. ::selection {
  81. background: #e9e9e9;
  82. color: #fff;
  83. }
  84.  
  85. ::-moz-selection {
  86. background: #e9e9e9;
  87. color: #fff;
  88. }
  89.  
  90.  
  91. #popuptitle {
  92. width:400px;
  93. text-align:center;
  94. font-size:50px;
  95. font-family: 'Tenali Ramakrishna', cursive;
  96. margin-bottom:10px;
  97. color:#605f6b;
  98. font-style:italic;
  99. }
  100.  
  101. /* filter crap */
  102.  
  103. .nv td a {
  104. background: #e4e4e4;
  105. padding: 8px;
  106. margin: 3px;
  107. text-transform: uppercase;
  108. font-style: bold;
  109. display:block;
  110. font-size: 10px;
  111. width: 100px;
  112. text-align: center;
  113. color: #393860;
  114. -o-transition-transition: all 0.6s ease-out;
  115. -webkit-transition: all 0.6s ease-out;
  116. -moz-transition: all 0.6s ease-out;
  117. }
  118.  
  119.  
  120.  
  121. .nv td a:hover {
  122. background: #fff;
  123. padding: 8px;
  124. text-transform: uppercase;
  125. text-align: center;
  126. color: #5a3789;
  127. -o-transition-transition: all 0.6s ease-out;
  128. -webkit-transition: all 0.6s ease-out;
  129. -moz-transition: all 0.6s ease-out;
  130. }
  131.  
  132.  
  133. /*----------tooltips---------*/
  134.  
  135. #s-m-t-tooltip{
  136. max-width:150px;
  137. margin:15px;
  138. font-family: helvetica;
  139. padding-left: 3px;
  140. padding-right: 3px;
  141. padding-top: 2px;
  142. padding-bottom: 2px;
  143. border-top:2px solid #d9d9d9;
  144. border-bottom:2px solid #d9d9d9;
  145. letter-spacing: 1px;
  146. background:#343434;
  147. text-align:center;
  148. color:#fff;
  149. z-index:999999;
  150. font-size:7px;
  151. font-style:none;
  152. text-transform:uppercase;
  153. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  154. }
  155.  
  156.  
  157.  
  158.  
  159. </style>
  160. </head>
  161.  
  162. <body>
  163.  
  164.  
  165. <!--- depending on your links id you may need to change the 'navigate#' to whatever the thingy is. if you need help message me---- >
  166.  
  167.  
  168.  
  169.  
  170.  
  171. <div id="navi">
  172. <div id="navigate1">
  173. <a href="/URLHERE" title="titlehere">title here</a>
  174. </div>
  175. <div id="navigate2">
  176. <a href="/URLHERE" title="titlehere">title here</a>
  177. </div>
  178. <div id="navigate3">
  179. <a href="/URLHERE" title="titlehere">title here</a>
  180. </div>
  181.  
  182. <div id="navigate4">
  183. <a href="/URLHERE" title="titlehere">title here</a>
  184. </div>
  185.  
  186. <div id="navigate5">
  187. <a href="/URLHERE" title="titlehere">title here</a>
  188. </div>
  189.  
  190. </div>
  191.  
  192. <!------------------------------------------------------------------------------------------------------------>
  193.  
  194. </body>
  195.  
  196. <!-- B O X E S -->
  197.  
  198. <div id="box1" class="popup_block">
  199. <center><img src="https://40.media.tumblr.com/41a2df24c710ef0b548dc8a19070be7d/tumblr_inline_o4iips59m81tmr6hp_540.png"/img></center><p></p><p></p>
  200. <div id="lore">
  201.  
  202. <div style="overflow: auto; height: 400px; padding: 10px;">
  203. <div style="text-align: justify;">
  204. <div style="font-color: #e2e2e2; width: 300px; height: autopx; text-align: justify; margin-left: 5px; padding-bottom: 20px;">
  205. <br>
  206.  
  207. <div id="popuptitle">title</div><br>
  208.  
  209. CONTENT
  210. CONTENT
  211. CONTENT
  212. </div>
  213.  
  214. </div></div></div></div></div></div></div></div></div></div>
  215. </div></div></div></div></div></div>
  216.  
  217. <div id="box2" class="popup_block">
  218. <center><img src="https://40.media.tumblr.com/41a2df24c710ef0b548dc8a19070be7d/tumblr_inline_o4iips59m81tmr6hp_540.png"/img></center><p></p><p></p>
  219. <div id="lore">
  220.  
  221. <div style="overflow: auto; height: 400px; padding: 10px;">
  222. <div style="text-align: justify;">
  223. <div style="font-color: #e2e2e2; width: 300px; height: autopx; text-align: justify; margin-left: 5px; padding-bottom: 20px;">
  224. <br>
  225.  
  226. <div id="popuptitle">title</div><br>
  227.  
  228. CONTENT
  229. CONTENT
  230. CONTENT
  231. </div>
  232.  
  233. </div></div></div></div></div></div></div></div></div></div>
  234. </div></div></div></div></div></div>
  235.  
  236. <div id="box3" class="popup_block">
  237. <center><img src="https://40.media.tumblr.com/41a2df24c710ef0b548dc8a19070be7d/tumblr_inline_o4iips59m81tmr6hp_540.png"/img></center><p></p><p></p>
  238. <div id="lore">
  239.  
  240. <div style="overflow: auto; height: 400px; padding: 10px;">
  241. <div style="text-align: justify;">
  242. <div style="font-color: #e2e2e2; width: 300px; height: autopx; text-align: justify; margin-left: 5px; padding-bottom: 20px;">
  243. <br>
  244.  
  245. <div id="popuptitle">title</div><br>
  246.  
  247. CONTENT
  248. CONTENT
  249. CONTENT
  250. </div>
  251.  
  252. </div></div></div></div></div></div></div></div></div></div>
  253. </div></div></div></div></div></div>
  254.  
  255. <div id="box4" class="popup_block">
  256. <center><img src="https://40.media.tumblr.com/41a2df24c710ef0b548dc8a19070be7d/tumblr_inline_o4iips59m81tmr6hp_540.png"/img></center><p></p><p></p>
  257. <div id="lore">
  258.  
  259. <div style="overflow: auto; height: 400px; padding: 10px;">
  260. <div style="text-align: justify;">
  261. <div style="font-color: #e2e2e2; width: 300px; height: autopx; text-align: justify; margin-left: 5px; padding-bottom: 20px;">
  262. <br>
  263.  
  264. <div id="popuptitle">title</div><br>
  265.  
  266. CONTENT
  267. CONTENT
  268. CONTENT
  269. </div>
  270.  
  271. </div></div></div></div></div></div></div></div></div></div>
  272. </div></div></div></div></div></div>
  273.  
  274. <div id="box5" class="popup_block">
  275. <center><img src="https://40.media.tumblr.com/41a2df24c710ef0b548dc8a19070be7d/tumblr_inline_o4iips59m81tmr6hp_540.png"/img></center><p></p><p></p>
  276. <div id="lore">
  277.  
  278. <div style="overflow: auto; height: 400px; padding: 10px;">
  279. <div style="text-align: justify;">
  280. <div style="font-color: #e2e2e2; width: 300px; height: autopx; text-align: justify; margin-left: 5px; padding-bottom: 20px;">
  281. <br>
  282.  
  283. <div id="popuptitle">title</div><br>
  284.  
  285. <div id="popuptitle">Filter</div><br>
  286.  
  287. <center>
  288. <div class="nv">
  289. <table>
  290. <tr><td><h1>General</h1>
  291. <a href="/">Rules</a>
  292. <a href="/">Disclaimers</a>
  293. <a href="/tagged/®-PSA ®">PSA</a>
  294. <a href="/tagged/%7B-%3B%3B-save-%7D">Saved Things</a>
  295. <a href="/">N/A</a>
  296. </td>
  297. <td><h1>Muse</h1>
  298. <a href="/filter">Verses</a>
  299. <a href="/tagged/┊✖.┊▌-◣--ʙʀᴇᴀᴄʜ-ʜᴇʀ-ʟɪᴘs﹐ᴛᴇᴀʀ-ᴅᴏᴡɴ-ʜᴇʀ-ᴡᴀʟʟs﹐-ᴇɴᴛᴇʀ-ʟɪᴋᴇ-ᴛʀᴏʏ.-❜-◥-┊%28-musings.-%29">Musings</a>
  300. <a href="/tagged/簡-%3A┊▌❛-%28-ℎℯα∂ςαηℴη.-%29-❜┊◣- tales-to-be-told.-◥">Headcanons</a>
  301. <a href="/tagged/╳-␠┊◤-hearts-a-tremble.-stolen-from-her-lips-what-you-seek.-❜-◥┊">Answers</a>
  302. <a href="/tagged/╳-♬-␖┊-◤-turn-the-key-%26.-let-the-melody-breach-lull.-❜◥┊%28-music.-%29">Music</a>
  303.  
  304. </td>
  305. <td><h1>Verse</h1>
  306. <a href="/tagged/╳-␋┊-◤-her-fundamental-ballad.-❜◥┊%28-main-verse.-%29">Fairy Tail</a>
  307. <a href="/tagged/╳-␋┊-◤-ᴍʏ-ɴɪɴᴅᴏ﹐-ᴋᴇᴇᴘ-ᴛᴏ-ᴛʜᴇ-ᴄᴏᴅᴇ﹐-ʟɪᴠᴇ.-❜◥┊%28-naruto-verse.-%29">Naruto</a>
  308. <a href="/tagged/╳-␋┊-◤-a-valkyrie-of-ivory-for-her-lord-.-❜◥┊%28-bleach-verse.-%29">Bleach</a>
  309. <a href="/tagged/╳-␋┊-◤-ᴡʜᴇɴ-ᴛʜᴇ-ᴡᴀʀ-ᴇɴᴅs-ᴡʜᴀᴛ-ɪs-ʟᴇғᴛ-ʙᴜᴛ-ᴍᴇᴍᴏʀɪᴇs-﹠.-ʙʟᴏᴏᴅ.-❜◥┊%28-war-verse.-%29">War</a>
  310. <a href="/tagged/╳-␋┊-◤-𝕕𝕖𝕤𝕠𝕝𝕒𝕥𝕖-𝕒𝕕𝕧𝕖𝕟𝕥𝕦𝕣𝕖.-❜◥┊%28-unknown-verse.-%29">Unknown </a>
  311. </tr>
  312.  
  313. <tr>
  314. <td><h1>OOC</h1>
  315. <a href="/tagged/␛▐- ◤ᴅᴏᴡɴ-ʟɪᴋᴇ-ᴛʀᴏʏ-◥-▐-%28-ooc-.-%29">OOC Tag</a>
  316. <a href="/tagged/♔-┊-ʙᴇ-ᴀ-ᴍᴀᴇʟsᴛʀᴏᴍ-ʙʏ-ᴛʜᴇ-ᴘʀᴏᴘʜᴇᴛs-ʜᴀɴᴅ-┊mun-edit.-❜">Mun Edits</a>
  317. <a href="/tagged/聞く-%3A┊▌❛-%28-paperless-ask.-%29-❜┊◣-८ﻪսε८հﻨεε.-◥">Mun Answer</a>
  318. <a href="/tagged/♔-┊∫ℯℓƒ-℘rℴღℴ-┊shameful-actions.-❜">Self Promo</a>
  319. <a href="/tagged/♔-┊℘rℴღℴ-┊follow-thy-because-they-will-ablaze-the-heart.-❜">Friendly Promo</a>
  320. </td>
  321.  
  322. <td><h1>Gallery</h1>
  323. <a href="/tagged/♚-┊▌❛-%28-ᵛ%27ˢᵃᵍᵉ-%29-❜┊◣-a-modern-prophet-%3B-a-Valkyrie-in-the-way-of-式の神.-◥">Visage</a>
  324. <a href="/tagged/╳-%3A-┊体格┊-◤-shes-made-of-ivory-sheets.-❜◥┊%28-physique-%7C-physical-aspects.-%29">Physical</a>
  325. <a href="/tagged/╳-♡┊-折り紙┊-◤-her-animating-principle.-❜◥┊%28-origami.-%29">Origami</a>
  326. <a href="/tagged/♚-┊▌❛-%28-αℯşℸℎℯℸίςş.-%29-❜┊◣-akin-to-her-soul.-◥">Aesthetics</a>
  327. <a href="/tagged/⚜%7B-%3B%3B-only-the-finest-silk-for-the-paper-lady">Clothing</a>
  328. </td>
  329. <td><h1>Sabers</h1>
  330. <a href="/tagged/%7B ホーム-%7D">Helm</a>
  331. <a href="/tagged/%7B-%3B%3B-legit-my-fav-art-tho-look-at-that-sabertooth-tiger-%7D">Light</a>
  332. <a href="/tagged/%7B-%3B%3B-Ӄing-of-the-dark%3B-Ӄing-of-the-shadows%3B-is-it-he-who-causes-her-darkness">Dark</a>
  333. <a href="/tagged/%7B-%3B%3B-the-princess-that-rules-the-sabers%3B-for-she-is-pure%3B-she-glows%3B-will-she-teach-the-one-of-paper-to-do-the-same">Angel</a>
  334. <a href="/tagged/%7B-%3B%3B-H-A-I-L-THE-Q-U-E-E-N-%3B-her-hearts-ablaze-and-her-claws-are-out%3B-hunt-the-saber-subjects%3B-she-dares-you%3B-for-she-thrives-in-REVENGE">Queen</a>
  335. </td>
  336.  
  337. <tr>
  338. <td><h1>Writing</h1>
  339. <a href="/tagged/╳-✎┊-短編小説┊-◤-impart%3B-a-tale-of-woe-or-gaiety﹖-❜◥┊%28-drabble.-%29">Drabble</a>
  340. <a href="/tagged/%5B-uh-sij-oo-uh-s-%5D">Memes</a>
  341. <a href="/tagged/%26.┊◣-%3A【-crack.-】%3A-◥">Crack RPs</a>
  342. <a href="/">Wishlist (Norm / AU)</a>
  343. <a href="/tagged/%26.┊◣-%3A-【-dash-commentary.-】%3A-◥">Dash Commentary</a>
  344. </td>
  345.  
  346. </tr>
  347.  
  348. </table>
  349. </div>
  350. </center>
  351.  
  352. </div></div></div></div></div></div></div></div></div></div>
  353. </div></div></div></div></div></div>
  354.  
  355. <!---- if you want more just copy & paste the stuff from <div id= skdjnvkdfjnv yadaydaya on-make sure to keep html code in there!---->
  356. </html>
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!