ポップアップウィンドウを実現するための jquery のコード例 effect

ポップアップウィンドウを実現するための jquery のコード例 effect_jquery

WBOY

リリース： 2016-05-16 17:12:06

オリジナル

1225 人が閲覧しました

ポップアップウィンドウを実装するJavaScriptは、基本的にはブラウザ上に正方形の領域を描画し、最初は非表示にし、JavaScriptイベントが発生したときにcss属性値を変更することでのみ表示するというものです。

一般的な手順は次のとおりです:

< ;html>

jQuery の例 1: フローティングウィンドウ

<リンクタイプ= "text/css" rel="stylesheet" href="css/win.css" mce_href="css/win.css"> < ; /body>

ポップアップウィンドウ

私がタイトルバーです！ X

私は窓です!
🎜>

コードをコピーします

コードは次のとおりです:

#win{
/*border*/
border:1px red Solid ;
/*ウィンドウの高さと幅*/
width: 300px;
height: 200px;
/*ウィンドウの位置*/

位置: 絶対;
上: 100px ;
左: 350px;

/*最初はウィンドウは非表示です*/ 表示: なし;}/*背景色のスタイル*/#title{background-color : blue; color : red;

/*タイトルバーの左内側のマージンを制御*/

padding- left: 3px;
}
#cotent{
padding-left : 3px;
padding-top : 5px;
}
/*閉じるボタンの位置を制御します*/ 
#close{
 margin-left: 188px;
 /*マウスが >



に移動するとコードをコピー


コードは次のとおりです。


function showWin(){
 /*div ノードを検索して Return*/
 var winNode = $("#win");
 //方法 1: js を使用して CSS 値を変更し、表示効果を実現します
 // winNode.css("display", "block ");
 //方法 2: jquery の show メソッドを使用して、表示効果
 // winNode.show("slow");
 //方法 3: jquery の fadeIn メソッドを使用してフェードインを実現します
 winNode.fadeIn("slow");
}
function hide(){
 var winNode = $("#win");
 //方法 1: css の値を変更します