Home > Developer > JavaScript
Some people asked about this effect in the Forum a few days ago. I am free to study it today. I made the original mark, because I did not refer to other people's code when writing this method. My method is to add the ALPHA filter to the layer mask to achieve the expected effect.
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> prompt box </title> <style type =" text/css "> a {color: #000; font-size: 12px; text-decoration: none} a: hover {color: #900; text-decoration: underline} body {background:; filter: progid: DXImageTransform. microsoft. gradient (gradientType = 0, startColorStr = # ffffff, endColorStr = #003366); overflow: hidden} # massage_box {position: absolute; le Ft: expression (body. clientWidth-350)/2); top: expression (body. clientHeight-200)/2); width: 350px; height: 200px; filter: dropshadow (color = #666666, offx = 3, offy = 3, positive = 2); z-index: 2; visibility: hidden} # mask {position: absolute; top: 0; left: 0; width: expression (body. clientWidth); height: expression (body. clientHeight); background: #666; filter: ALPHA (opacity = 60); z-index: 1; visibility: hidden }. massage {bord Er: #036 solid; border-width: 1 1 3 1; width: 95%; height: 95%; background: # fff; color: #036; font-size: 12px; line-height: 150% }. header {background: #036; height: 10%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 3 5 0 5; color: # fff} </style> </pead> <body> message on this site × <ul style = "margin-right: 25 "> <li> I declare that all the articles (including illustrations) on this blog are original articles. If you need to quote or repost them, please indicate the source. </Li> <li> you are welcome to leave comments on your opinions in this blog post. Do not drop the complaints of bored people who have no quality or opinion. </Li> <li> background music has been set up on this site. when listening to music collected in the music box, close the background music at the bottom of the page. </Li> </ul> display prompt information </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Drag message box
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> prompt box </title> <style type =" text/css "> a {color: #000; font-size: 12px; text-decoration: none} a: hover {color: #900; text-decoration: underline} body {background:; filter: progid: DXImageTransform. microsoft. gradient (gradientType = 0, startColorStr = # ffffff, endColorStr = #003366); overflow: hidden} # massage_box {position: absolute; le Ft: expression (body. clientWidth-350)/2); top: expression (body. clientHeight-200)/2); width: 350px; height: 200px; filter: dropshadow (color = #666666, offx = 3, offy = 3, positive = 2); z-index: 2; visibility: hidden} # mask {position: absolute; top: 0; left: 0; width: expression (body. clientWidth); height: expression (body. clientHeight); background: #666; filter: ALPHA (opacity = 60); z-index: 1; visibility: hidden }. massage {bord Er: #036 solid; border-width: 1 1 3 1; width: 95%; height: 95%; background: # fff; color: #036; font-size: 12px; line-height: 150% }. header {background: #036; height: 10%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 3 5 0 5; color: # fff} </style> </pead> <body> message on this site × <ul style = "margin-right: 25 "> <li> I declare that all the articles (including illustrations) on this blog are original articles. If you need to quote or repost them, please indicate the source. </Li> <li> you are welcome to leave comments on your opinions in this blog post. Do not drop the complaints of bored people who have no quality or opinion. </Li> <li> background music has been set up on this site. when listening to music collected in the music box, close the background music at the bottom of the page. </Li> </ul> display prompt information </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
So why cannot I adapt to the height? Can I retrieve the page height? Why not?
Use scrollWidth and scrollHeight.
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> prompt box </title> <style type =" text/css "> a {color: #000; font-size: 12px; text-decoration: none} a: hover {color: #900; text-decoration: underline} body {background:; filter: progid: DXImageTransform. microsoft. gradient (gradientType = 0, startColorStr = # ffffff, endColorStr = #003366); overflow: hidden} # massage_box {position: absolute; le Ft: expression (body. clientWidth-350)/2); top: expression (body. clientHeight-200)/2); width: 350px; height: 200px; filter: dropshadow (color = #666666, offx = 3, offy = 3, positive = 2); z-index: 2; visibility: hidden} # mask {position: absolute; top: 0; left: 0; width: expression (body. scrollWidth); height: expression (body. scrollHeight); background: #666; filter: ALPHA (opacity = 60); z-index: 1; visibility: hidden }. massage {bord Er: #036 solid; border-width: 1 1 3 1; width: 95%; height: 95%; background: # fff; color: #036; font-size: 12px; line-height: 150% }. header {background: #036; height: 10%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 3 5 0 5; color: # fff} </style> </pead> <body> message on this site × <ul style = "margin-right: 25 "> <li> I declare that all the articles (including illustrations) on this blog are original articles. If you need to quote or repost them, please indicate the source. </Li> <li> you are welcome to leave comments on your opinions in this blog post. Do not drop the complaints of bored people who have no quality or opinion. </Li> <li> background music has been set up on this site. when listening to music collected in the music box, close the background music at the bottom of the page. </Li> </ul> display the prompt message bottom here </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
