我正在设计一个网页。当我们点击div命名邮件的内容，我怎么能显示一个弹出窗口包含标签电子邮件和文本框?
当前回答
我认为这是一个编写简单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。
简单的弹出窗口，使用html5和javascript。
html: -
<dialog id="window">
<h3>Sample Dialog!</h3>
<p>Lorem ipsum dolor sit amet</p>
<button id="exit">Close Dialog</button>
</dialog>
<button id="show">Show Dialog</button>
JavaScript: -
(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
})();
这里有一个很好的简单的例子:http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
让我们试试....如何创建一个简单的弹出窗口使用HTML, CSS和jquery…
$(function() { // Open Popup $('[popup-open]').on('click', function() { var popup_name = $(this).attr('popup-open'); $('[popup-name="' + popup_name + '"]').fadeIn(300); }); // Close Popup $('[popup-close]').on('click', function() { var popup_name = $(this).attr('popup-close'); $('[popup-name="' + popup_name + '"]').fadeOut(300); }); // Close Popup When Click Outside $('.popup').on('click', function() { var popup_name = $(this).find('[popup-close]').attr('popup-close'); $('[popup-name="' + popup_name + '"]').fadeOut(300); }).children().click(function() { return false; }); }); body { font-family:Arial, Helvetica, sans-serif; } p { font-size: 16px; line-height: 26px; letter-spacing: 0.5px; color: #484848; } /* Popup Open button */ .open-button{ color:#FFF; background:#0066CC; padding:10px; text-decoration:none; border:1px solid #0157ad; border-radius:3px; } .open-button:hover{ background:#01478e; } .popup { position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); width:100%; height:100%; display:none; } /* Popup inner div */ .popup-content { width: 700px; margin: 0 auto; box-sizing: border-box; padding: 40px; margin-top: 100px; box-shadow: 0px 2px 6px rgba(0,0,0,1); border-radius: 3px; background: #fff; position: relative; } /* Popup close button */ .close-button { width: 25px; height: 25px; position: absolute; top: -10px; right: -10px; border-radius: 20px; background: rgba(0,0,0,0.8); font-size: 20px; text-align: center; color: #fff; text-decoration:none; } .close-button:hover { background: rgba(0,0,0,1); } @media screen and (max-width: 720px) { .popup-content { width:90%; } } <!DOCTYPE html> <html> <head> <title> Popup </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup Preview</a> <div class="popup" popup-name="popup-1"> <div class="popup-content"> <h2>Title of Popup </h2> <p>Popup 1 content will be here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat diam ut tortor dignissim, vel accumsan libero venenatis. Nunc pretium volutpat convallis. Integer at metus eget neque hendrerit vestibulum. Aenean vel mattis purus. Fusce condimentum auctor tellus eget ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a> </div> </div> </body> </html>
极其轻量级的模态弹出插件。 POPELT - http://welbour.com/labs/popelt/
它是轻量级的，支持嵌套弹出窗口，面向对象，支持动态按钮，响应式等等。 下一次更新将包括弹出Ajax表单提交等。
请随意使用并发布反馈。
