我正在设计一个网页。当我们点击名为 mail 的 div 内容时，如何显示包含标签电子邮件和文本框的弹出窗口？
如何使用 jQuery 生成一个简单的弹出窗口
IT技术
javascript
jquery
css
ajax
popup
2021-01-19 04:34:22
6个回答
首先是 CSS - 随心所欲地调整它：
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
和 JavaScript：
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: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
最后是 html：
<div class="messagepop pop">
<form method="post" id="new_message" action="/messages">
<p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
<p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
<p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
<a href="/contact" id="contact">Contact Us</a>
根据情况，您可能希望通过 ajax 调用加载弹出内容。如果可能，最好避免这种情况，因为它可能会给用户带来更严重的延迟，然后才能看到内容。如果您采用这种方法，您将在此处进行一些更改。
HTML 变为：
<div>
<div class="messagepop pop"></div>
<a href="/contact" id="contact">Contact Us</a>
</div>
JavaScript 的总体思路变为：
$("#contact").on('click', function() {
if($(this).hasClass("selected")) {
deselect();
} else {
$(this).addClass("selected");
$.get(this.href, function(data) {
$(".pop").html(data).slideFadeToggle(function() {
$("input[type=text]:first").focus();
});
}
}
return false;
});
查看jQuery UI 对话框。你会像这样使用它：
jQuery：
$(document).ready(function() {
$("#dialog").dialog();
});
标记：
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
完毕！
请记住，这是关于最简单的用例，我建议阅读文档以更好地了解可以用它做什么。
我使用了一个名为ColorBox的 jQuery 插件，它是
- 非常容易使用
- 轻的
- 可定制
- 我见过的最好的 jQuery 弹出对话框
试试Magnific Popup，它react灵敏，重量只有 3KB 左右。
访问这个网址