如何使用 jQuery 建立簡單的彈出視窗？

使用jQuery 建立簡單的彈出視窗

許多Web 應用程式需要能夠顯示附加資訊或允許使用者在不離開目前頁面的情況下進行輸入。常見的解決方案是使用彈出視窗。在本文中，我們將探索如何使用 jQuery 建立一個簡單的彈出視窗。

自訂外觀

要自訂彈出視窗的外觀，請調整以下CSS：

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

.messagepop {
背景顏色:#FFFFFF;
邊框:1pxsolid #999999;
遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；
顯示：無🎜>遊標：預設；

顯示：無🎜> ;

邊距頂部： 15px;
位置:絕對;
文字對齊:左;
寬度:394px;
z-index:50;
填滿: 25px 25px 20px;

}

標籤🎜>顯示：區塊;
margin-bottom: 3px;
padding-left: 15px;
文字縮排: -15px;
}

.messagepop p, .messagepop.divorderx-bottom> bpx-bottom 1px EFEFEF;邊距：8px 0; padding-bottom: 8px;

}

jQuery 實作

接下來，實作jQuery 程式碼：

e.removeClass('selected');

接下來，實作jQuery 程式碼：

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

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

});

}

$(function() {

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

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

});

$('.close').on('點擊', function() {

});});

$.fn.slideFadeToggle = function(easing,回調) {

return this.animate({ opacity: '切換'，高度：'切換'}，'快速'，緩動， callback);

};

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

HTML結構

最後，加入HTML結構以顯示彈出視窗：

以上是如何使用 jQuery 建立簡單的彈出視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！