我正在设计一个网页。当我们点击div命名邮件的内容,我怎么能显示一个弹出窗口包含标签电子邮件和文本框?
当前回答
我认为这是一个编写简单jquery弹出窗口的很好的教程。而且它看起来很漂亮
其他回答
极其轻量级的模态弹出插件。 POPELT - http://welbour.com/labs/popelt/
它是轻量级的,支持嵌套弹出窗口,面向对象,支持动态按钮,响应式等等。 下一次更新将包括弹出Ajax表单提交等。
请随意使用并发布反馈。
这里有一个很好的简单的例子:http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
我使用的是一个叫做ColorBox的jQuery插件
非常容易使用 轻量级 可定制的 这是我见过的jQuery最好的弹出对话框
这是一个非常简单的弹出窗口:
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position:absolute;
background:gray;
padding:8px;
}
#content {
background:white;
padding:20px;
}
#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var modal = (function(){
// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);
});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();
});
// Open the modal
return function (content) {
$content.html(content);
// Center the modal in the viewport
$modal.css({
top: ($(window).height() - $modal.outerHeight()) / 2,
left: ($(window).width() - $modal.outerWidth()) / 2
});
$modal.show();
};
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='popup' href='#'>Simple popup</a>
</body>
</html>
更灵活的解决方案可以在本教程中找到:http://www.jacklmoore.com/notes/jquery-modal-tutorial/ 这里是示例的close.png。
我认为这是一个编写简单jquery弹出窗口的很好的教程。而且它看起来很漂亮