如何使用 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.div {
border-bottom ：1px实心#EFEFEF;
边距：8px 0;
padding-bottom: 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('点击', function() {

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

});
});

$.fn.slideFadeToggle = function(easing, 回调) {
return this.animate({ opacity: '切换'，高度：'切换'}，'快速'，缓动， callback);
};

HTML 结构

最后，添加 HTML 结构以显示弹出窗口：

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

以上是如何使用 jQuery 创建简单的弹出窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！