popup info design

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • popup info design

      Hello there

      How do I change the popup info design and it opens slowly I just do the design or file from which I want to make new popup design.

      screenshot:
      Images
      • Screenshot_38.png

        588.34 kB, 1,021×613, viewed 562 times
    • Отредактировать:
      1) \styles\templates\game
      [Blocked Image: https://i.paste.pics/7237812500bad1070e0d4ed8044eda58.png]
      2) \styles\resource\images\fancybox (image)
    • formate.css

      CSS Source Code: formae.css

      1. /* Блок информации */
      2. body.popup{
      3. padding:0;
      4. }
      5. #fancybox-loading {
      6. position: fixed;
      7. top: 50%;
      8. left: 50%;
      9. width: 40px;
      10. height: 40px;
      11. margin-top: -20px;
      12. margin-left: -20px;
      13. cursor: pointer;
      14. overflow: hidden;
      15. z-index: 7104;
      16. display: none;
      17. }
      18. #fancybox-loading div {
      19. position: absolute;
      20. top: 0;
      21. left: 0;
      22. width: 40px;
      23. height: 480px;
      24. background-image: url('../images/fancybox/fancybox.png');
      25. }
      26. #fancybox-overlay {
      27. position: absolute;
      28. top: 0;
      29. left: 0;
      30. width: 100%;
      31. z-index: 7100;
      32. display: none;
      33. }
      34. #fancybox-tmp {
      35. padding: 0;
      36. margin: 0;
      37. border: 0;
      38. overflow: auto;
      39. display: none;
      40. }
      41. #fancybox-wrap {
      42. position: absolute;
      43. top: 0;
      44. left: 0;
      45. padding: 20px;
      46. z-index: 7101;
      47. outline: none;
      48. display: none;
      49. }
      50. #fancybox-outer {
      51. position: relative;
      52. width: 100%;
      53. height: 100%;
      54. background: #fff;
      55. }
      56. #fancybox-content {
      57. width: 0;
      58. height: 0;
      59. padding: 0;
      60. outline: none;
      61. position: relative;
      62. overflow: hidden;
      63. z-index: 7102;
      64. border: 0px solid #fff;
      65. }
      66. #fancybox-hide-sel-frame {
      67. position: absolute;
      68. top: 0;
      69. left: 0;
      70. width: 100%;
      71. height: 100%;
      72. background: transparent;
      73. z-index: 7101;
      74. }
      75. #fancybox-close {
      76. position: absolute;
      77. top: -19px;
      78. right: -19px;
      79. width: 18px;
      80. height: 18px;
      81. background: url('./img/iconav/close.gif');
      82. cursor: pointer;
      83. z-index: 7103;
      84. display: none;
      85. }
      86. #fancybox-close:hover{
      87. background-position:0 -18px;
      88. }
      89. #fancybox-error {
      90. color: #444;
      91. font: normal 12px/20px Arial;
      92. padding: 14px;
      93. margin: 0;
      94. }
      95. #fancybox-img {
      96. width: 100%;
      97. height: 100%;
      98. padding: 0;
      99. margin: 0;
      100. border: none;
      101. outline: none;
      102. line-height: 0;
      103. vertical-align: top;
      104. }
      105. #fancybox-frame {
      106. width: 100%;
      107. height: 100%;
      108. border: none;
      109. display: block;
      110. }
      111. #fancybox-left, #fancybox-right {
      112. position: absolute;
      113. bottom: 0px;
      114. height: 100%;
      115. width: 35%;
      116. cursor: pointer;
      117. outline: none;
      118. background: transparent url('../images/fancybox/blank.gif');
      119. z-index: 7102;
      120. display: none;
      121. }
      122. #fancybox-left {
      123. left: 0px;
      124. }
      125. #fancybox-right {
      126. right: 0px;
      127. }
      128. #fancybox-left-ico, #fancybox-right-ico {
      129. position: absolute;
      130. top: 50%;
      131. left: -9999px;
      132. width: 30px;
      133. height: 30px;
      134. margin-top: -15px;
      135. cursor: pointer;
      136. z-index: 7102;
      137. display: block;
      138. }
      139. #fancybox-left-ico {
      140. background-image: url('../images/fancybox/fancybox.png');
      141. background-position: -40px -30px;
      142. }
      143. #fancybox-right-ico {
      144. background-image: url('../images/fancybox/fancybox.png');
      145. background-position: -40px -60px;
      146. }
      147. #fancybox-left:hover, #fancybox-right:hover {
      148. visibility: visible; /* IE6 */
      149. }
      150. #fancybox-left:hover span {
      151. left: 20px;
      152. }
      153. #fancybox-right:hover span {
      154. left: auto;
      155. right: 20px;
      156. }
      157. .fancybox-bg {
      158. position: absolute;
      159. padding: 0;
      160. margin: 0;
      161. border: 0;
      162. width: 19px;
      163. height: 19px;
      164. z-index: 7001;
      165. background:#091d2e;
      166. }
      167. #fancybox-bg-n {
      168. top: -20px;
      169. left: 0;
      170. width: 100%;
      171. border-top:1px solid #000;
      172. }
      173. #fancybox-bg-ne {
      174. top: -20px;
      175. right: -20px;
      176. border-top:1px solid #000;
      177. border-right:1px solid #000;
      178. }
      179. #fancybox-bg-e {
      180. top: 0;
      181. right: -20px;
      182. height: 100%;
      183. border-right:1px solid #000;
      184. }
      185. #fancybox-bg-se {
      186. bottom: -20px;
      187. right: -20px;
      188. border-bottom:1px solid #000;
      189. border-right:1px solid #000;
      190. }
      191. #fancybox-bg-s {
      192. bottom: -20px;
      193. left: 0;
      194. width: 100%;
      195. border-bottom:1px solid #000;
      196. }
      197. #fancybox-bg-sw {
      198. bottom: -20px;
      199. left: -20px;
      200. border-bottom:1px solid #000;
      201. border-left:1px solid #000;
      202. }
      203. #fancybox-bg-w {
      204. top: 0;
      205. left: -20px;
      206. height: 100%;
      207. border-left:1px solid #000;
      208. }
      209. #fancybox-bg-nw {
      210. top: -20px;
      211. left: -20px;
      212. border-top:1px solid #000;
      213. border-left:1px solid #000;
      214. }
      215. #fancybox-title {
      216. font-family: Helvetica;
      217. font-size: 12px;
      218. z-index: 7102;
      219. }
      220. .fancybox-title-inside {
      221. padding-bottom: 10px;
      222. text-align: center;
      223. color: #333;
      224. background: #fff;
      225. position: relative;
      226. }
      227. .fancybox-title-outside {
      228. padding-top: 10px;
      229. color: #fff;
      230. }
      231. .fancybox-title-over {
      232. position: absolute;
      233. bottom: 0;
      234. left: 0;
      235. color: #FFF;
      236. text-align: left;
      237. }
      238. #fancybox-title-over {
      239. padding: 10px;
      240. background-image: url('../images/fancybox/fancy_title_over.png');
      241. display: block;
      242. }
      243. .fancybox-title-float {
      244. position: absolute;
      245. left: 0;
      246. bottom: -20px;
      247. height: 32px;
      248. }
      249. #fancybox-title-float-wrap {
      250. border: none;
      251. border-collapse: collapse;
      252. width: auto;
      253. }
      254. #fancybox-title-float-wrap td {
      255. border: none;
      256. white-space: nowrap;
      257. }
      258. #fancybox-title-float-left {
      259. padding: 0 0 0 15px;
      260. background: url('../images/fancybox/fancybox.png') -40px -90px no-repeat;
      261. }
      262. #fancybox-title-float-main {
      263. color: #FFF;
      264. line-height: 29px;
      265. font-weight: bold;
      266. padding: 0 0 3px 0;
      267. background: url('../images/fancybox/fancybox-x.png') 0px -40px;
      268. }
      269. #fancybox-title-float-right {
      270. padding: 0 0 0 15px;
      271. background: url('../images/fancybox/fancybox.png') -55px -90px no-repeat;
      272. }
      273. /* IE6 */
      274. .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }
      275. .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
      276. .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }
      277. .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
      278. .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
      279. .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
      280. .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }
      281. .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
      282. height: expression(this.parentNode.clientHeight + "px");
      283. }
      284. #fancybox-loading.fancybox-ie6 {
      285. position: absolute; margin-top: 0;
      286. top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
      287. }
      288. #fancybox-loading.fancybox-ie6 div {
      289. background: transparent;
      290. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='scale');
      291. }
      292. /* IE6, IE7, IE8 */
      293. .fancybox-ie .fancybox-bg {
      294. background: transparent !important;
      295. }
      296. .fancybox-ie #fancybox-bg-n {
      297. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale');
      298. }
      299. .fancybox-ie #fancybox-bg-ne {
      300. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale');
      301. }
      302. .fancybox-ie #fancybox-bg-e {
      303. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale');
      304. }
      305. .fancybox-ie #fancybox-bg-se {
      306. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale');
      307. }
      308. .fancybox-ie #fancybox-bg-s {
      309. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale');
      310. }
      311. .fancybox-ie #fancybox-bg-sw {
      312. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale');
      313. }
      314. .fancybox-ie #fancybox-bg-w {
      315. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale');
      316. }
      317. .fancybox-ie #fancybox-bg-nw {
      318. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale');
      319. }
      Display All
    • cronos86 wrote:

      Спасибо
      Вы знаете, как сделать всплывающее окно таким образом?
      Могу, но пока времени нет, чтобы вам объяснить корректно.
    • Yaro2709 wrote:

      formate.css

      CSS Source Code: formae.css

      1. /* Блок информации */
      2. body.popup{
      3. padding:0;
      4. }
      5. #fancybox-loading {
      6. position: fixed;
      7. top: 50%;
      8. left: 50%;
      9. width: 40px;
      10. height: 40px;
      11. margin-top: -20px;
      12. margin-left: -20px;
      13. cursor: pointer;
      14. overflow: hidden;
      15. z-index: 7104;
      16. display: none;
      17. }
      18. #fancybox-loading div {
      19. position: absolute;
      20. top: 0;
      21. left: 0;
      22. width: 40px;
      23. height: 480px;
      24. background-image: url('../images/fancybox/fancybox.png');
      25. }
      26. #fancybox-overlay {
      27. position: absolute;
      28. top: 0;
      29. left: 0;
      30. width: 100%;
      31. z-index: 7100;
      32. display: none;
      33. }
      34. #fancybox-tmp {
      35. padding: 0;
      36. margin: 0;
      37. border: 0;
      38. overflow: auto;
      39. display: none;
      40. }
      41. #fancybox-wrap {
      42. position: absolute;
      43. top: 0;
      44. left: 0;
      45. padding: 20px;
      46. z-index: 7101;
      47. outline: none;
      48. display: none;
      49. }
      50. #fancybox-outer {
      51. position: relative;
      52. width: 100%;
      53. height: 100%;
      54. background: #fff;
      55. }
      56. #fancybox-content {
      57. width: 0;
      58. height: 0;
      59. padding: 0;
      60. outline: none;
      61. position: relative;
      62. overflow: hidden;
      63. z-index: 7102;
      64. border: 0px solid #fff;
      65. }
      66. #fancybox-hide-sel-frame {
      67. position: absolute;
      68. top: 0;
      69. left: 0;
      70. width: 100%;
      71. height: 100%;
      72. background: transparent;
      73. z-index: 7101;
      74. }
      75. #fancybox-close {
      76. position: absolute;
      77. top: -19px;
      78. right: -19px;
      79. width: 18px;
      80. height: 18px;
      81. background: url('./img/iconav/close.gif');
      82. cursor: pointer;
      83. z-index: 7103;
      84. display: none;
      85. }
      86. #fancybox-close:hover{
      87. background-position:0 -18px;
      88. }
      89. #fancybox-error {
      90. color: #444;
      91. font: normal 12px/20px Arial;
      92. padding: 14px;
      93. margin: 0;
      94. }
      95. #fancybox-img {
      96. width: 100%;
      97. height: 100%;
      98. padding: 0;
      99. margin: 0;
      100. border: none;
      101. outline: none;
      102. line-height: 0;
      103. vertical-align: top;
      104. }
      105. #fancybox-frame {
      106. width: 100%;
      107. height: 100%;
      108. border: none;
      109. display: block;
      110. }
      111. #fancybox-left, #fancybox-right {
      112. position: absolute;
      113. bottom: 0px;
      114. height: 100%;
      115. width: 35%;
      116. cursor: pointer;
      117. outline: none;
      118. background: transparent url('../images/fancybox/blank.gif');
      119. z-index: 7102;
      120. display: none;
      121. }
      122. #fancybox-left {
      123. left: 0px;
      124. }
      125. #fancybox-right {
      126. right: 0px;
      127. }
      128. #fancybox-left-ico, #fancybox-right-ico {
      129. position: absolute;
      130. top: 50%;
      131. left: -9999px;
      132. width: 30px;
      133. height: 30px;
      134. margin-top: -15px;
      135. cursor: pointer;
      136. z-index: 7102;
      137. display: block;
      138. }
      139. #fancybox-left-ico {
      140. background-image: url('../images/fancybox/fancybox.png');
      141. background-position: -40px -30px;
      142. }
      143. #fancybox-right-ico {
      144. background-image: url('../images/fancybox/fancybox.png');
      145. background-position: -40px -60px;
      146. }
      147. #fancybox-left:hover, #fancybox-right:hover {
      148. visibility: visible; /* IE6 */
      149. }
      150. #fancybox-left:hover span {
      151. left: 20px;
      152. }
      153. #fancybox-right:hover span {
      154. left: auto;
      155. right: 20px;
      156. }
      157. .fancybox-bg {
      158. position: absolute;
      159. padding: 0;
      160. margin: 0;
      161. border: 0;
      162. width: 19px;
      163. height: 19px;
      164. z-index: 7001;
      165. background:#091d2e;
      166. }
      167. #fancybox-bg-n {
      168. top: -20px;
      169. left: 0;
      170. width: 100%;
      171. border-top:1px solid #000;
      172. }
      173. #fancybox-bg-ne {
      174. top: -20px;
      175. right: -20px;
      176. border-top:1px solid #000;
      177. border-right:1px solid #000;
      178. }
      179. #fancybox-bg-e {
      180. top: 0;
      181. right: -20px;
      182. height: 100%;
      183. border-right:1px solid #000;
      184. }
      185. #fancybox-bg-se {
      186. bottom: -20px;
      187. right: -20px;
      188. border-bottom:1px solid #000;
      189. border-right:1px solid #000;
      190. }
      191. #fancybox-bg-s {
      192. bottom: -20px;
      193. left: 0;
      194. width: 100%;
      195. border-bottom:1px solid #000;
      196. }
      197. #fancybox-bg-sw {
      198. bottom: -20px;
      199. left: -20px;
      200. border-bottom:1px solid #000;
      201. border-left:1px solid #000;
      202. }
      203. #fancybox-bg-w {
      204. top: 0;
      205. left: -20px;
      206. height: 100%;
      207. border-left:1px solid #000;
      208. }
      209. #fancybox-bg-nw {
      210. top: -20px;
      211. left: -20px;
      212. border-top:1px solid #000;
      213. border-left:1px solid #000;
      214. }
      215. #fancybox-title {
      216. font-family: Helvetica;
      217. font-size: 12px;
      218. z-index: 7102;
      219. }
      220. .fancybox-title-inside {
      221. padding-bottom: 10px;
      222. text-align: center;
      223. color: #333;
      224. background: #fff;
      225. position: relative;
      226. }
      227. .fancybox-title-outside {
      228. padding-top: 10px;
      229. color: #fff;
      230. }
      231. .fancybox-title-over {
      232. position: absolute;
      233. bottom: 0;
      234. left: 0;
      235. color: #FFF;
      236. text-align: left;
      237. }
      238. #fancybox-title-over {
      239. padding: 10px;
      240. background-image: url('../images/fancybox/fancy_title_over.png');
      241. display: block;
      242. }
      243. .fancybox-title-float {
      244. position: absolute;
      245. left: 0;
      246. bottom: -20px;
      247. height: 32px;
      248. }
      249. #fancybox-title-float-wrap {
      250. border: none;
      251. border-collapse: collapse;
      252. width: auto;
      253. }
      254. #fancybox-title-float-wrap td {
      255. border: none;
      256. white-space: nowrap;
      257. }
      258. #fancybox-title-float-left {
      259. padding: 0 0 0 15px;
      260. background: url('../images/fancybox/fancybox.png') -40px -90px no-repeat;
      261. }
      262. #fancybox-title-float-main {
      263. color: #FFF;
      264. line-height: 29px;
      265. font-weight: bold;
      266. padding: 0 0 3px 0;
      267. background: url('../images/fancybox/fancybox-x.png') 0px -40px;
      268. }
      269. #fancybox-title-float-right {
      270. padding: 0 0 0 15px;
      271. background: url('../images/fancybox/fancybox.png') -55px -90px no-repeat;
      272. }
      273. /* IE6 */
      274. .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }
      275. .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
      276. .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }
      277. .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
      278. .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
      279. .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
      280. .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }
      281. .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
      282. altura: expresión (this.parentNode.clientHeight + "px");
      283. }
      284. #fancybox-cargando.fancybox-ie6 {
      285. posición: absoluta; margen superior: 0;
      286. top: expresión( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body .scrollTop )) + 'px');
      287. }
      288. #fancybox-cargando.fancybox-ie6 div {
      289. fondo: transparente;
      290. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='escala');
      291. }
      292. /* IE6, IE7, IE8 */
      293. .fancybox-ie .fancybox-bg {
      294. fondo: transparente !importante;
      295. }
      296. .fancybox-ie #fancybox-bg-n {
      297. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale');
      298. }
      299. .fancybox-ie #fancybox-bg-ne {
      300. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale');
      301. }
      302. .fancybox-ie #fancybox-bg-e {
      303. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale');
      304. }
      305. .fancybox-ie #fancybox-bg-se {
      306. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale');
      307. }
      308. .fancybox-ie #fancybox-bg-s {
      309. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale');
      310. }
      311. .fancybox-ie #fancybox-bg-sw {
      312. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='escala');
      313. }
      314. .fancybox-ie #fancybox-bg-w {
      315. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='escala');
      316. }
      317. .fancybox-ie #fancybox-bg-nw {
      318. filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='escala');
      319. }
      Display All
      OK probaré a ver