この記事では、右下隅にあるJSのシンプルなポップアッププロンプトウィンドウ効果について説明します。次のように、参照のために共有してください。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> aa </titpe> <スタイル= "テキスト/cs">パディング：0px; } html、body {height：100％; } body {font-size：14px;ラインハイト：24px; } #tip {position：absolute;右：0px;下：0px;高さ：0px;幅：180px;国境：1pxソリッド#cccccc;バックグラウンドカラー：#eeeeee;パディング：1px;オーバーフロー：隠し;表示：なし;フォントサイズ：12px; z-index：10; } #tip p {padding：6px; } #tip h1 {font-size：14px;高さ：25px;ラインハイト：25px;バックグラウンドカラー：＃0066cc;色：#fffff;パディング：0px 3px 0px 3px;フィルター：アルファ（不透明度= 100）; } #tip h1 a、#detail h1 a {float：right;テキスト装置：なし;色：#fffff; } </style> <script type = "text/javascript"> window.onload = function（）{var divtip = document.createelement（ "div"）; divtip.id = "tip"; divtip.innerhtml = "<h1> <a href = 'javascript：void（0）' onclick = 'start（）'> close </a> title </h1> <p> <a href = 'javascript：void（0）' onclick = 'showwin（）'> content </a> </p>"; divtip.style.height = '0px'; divtip.style.bottom = '0px'; divtip.style.position = 'sixt'; document.body.appendChild（divtip）; } varハンドル; function start（count）{var obj = document.getElementById（ "Tip"）; if（parseint（obj.style.height）== 0）{obj.style.display = "block"; handle = setInterval（ "changeh（ 'up'）"、20）; } else {handle = setInterval（ "changeh（ 'down'）"、20）}} function changeh（str）{var obj = document.all？ document.all ["tip"]：document.getElementById（ "Tip"）; //docuemnt.all ???????? if（str == "up"）{if（parseint（obj.style.height）> 100）clearinterval（handle）; else obj.style.height =（parseint（obj.style.height） + 8）.toString（） + "px"; } if（str == "down"）{if（parseint（obj.style.height）<8）{clearInterval（handle）; obj.style.display = "none"; } else obj.style.height =（parseint（obj.style.height）-8）.toString（） + "px"; }} function showwin（）{//document.getelementsbytagname("html"）[0] .style.overflow = "hidden";始める（）; } </script> </head> <body> <a href = "＃" onclick = "start（）"> click </a> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。