jQueryで簡単なポップアップを作成するには?

jQuery を使用した単純なポップアップの作成

多くの Web アプリケーションでは、現在のページを離れることなく追加情報を表示したり、ユーザー入力を許可したりする機能が必要です。この問題に対する一般的な解決策は、ポップアップ ウィンドウを使用することです。この記事では、jQuery を使用して簡単なポップアップを作成する方法を説明します。

外観のカスタマイズ

ポップアップの外観をカスタマイズするには、次の CSS を調整します。

a.selected {
背景色:#1F75CC;
color:white;
z-index:100;
}

.messagepop {
背景色:#FFFFFF;
border:1px 実線 #999999;
カーソル:default;
表示:なし;
マージントップ: 15px;
Position:absolute;
text-align:left;
width:394px;
z-index:50;
パディング: 25px 25px 20px;
}

ラベル {
表示: ブロック;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}

.messagepop p, .messagepop.div {
border-bottom : 1px ソリッド #EFEFEF;
マージン: 8px 0;
パディングボトム: 8px;
}

jQuery の実装

次に、jQuery コードを実装します。

function deselect(e) {
$( '.pop').slideFadeToggle(function() {

e.removeClass('selected');

});
}

$(function() {
$('#contact').on('click', function() {

if($(this).hasClass('selected')) {
  deselect($(this));               
} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
}
return false;

});

$('.close').on('click', function() {

deselect($('#contact'));
return false;

});
});

$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'トグル'、高さ: 'トグル' }、'速い'、イージング、 callback);
};

HTML 構造

最後に、ポップアップを表示する HTML 構造を追加します。

< ;形状Method="post">

<p><label for="email">Your email or name</label><input type="text" size="30" name="email">

以上がjQueryで簡単なポップアップを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。