我正在设计一个网页。当我们点击div命名邮件的内容时，如何显示包含标签电子邮件和文本框的弹出窗口？
答案 0 :(得分：238)
首先是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>
Here is a jsfiddle demo and implementation.
根据具体情况，您可能希望通过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;
});
答案 1 :(得分：96)
结帐jQuery UI Dialog。你可以这样使用它：
jQuery：
$(document).ready(function() {
$("#dialog").dialog();
});
标记：
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
完成！
请记住，这是关于最简单的用例，我建议阅读documentation以更好地了解可以用它做什么。
答案 2 :(得分：23)
我使用名为ColorBox的jQuery插件，它是
答案 3 :(得分：8)
访问此网址
答案 4 :(得分：8)
尝试Magnific Popup，它的响应速度和重量仅为3KB左右。
答案 5 :(得分：4)
我认为这是一个great tutorial编写一个简单的jquery弹出窗口。而且看起来非常beautiful
答案 6 :(得分：3)
答案 7 :(得分：3)
极轻量级模态弹出插件。 POPELT - http://welbour.com/labs/popelt/
它是轻量级的，支持嵌套弹出窗口，面向对象，支持动态按钮，响应式等等。 下一次更新将包括Popup Ajax表单提交等。
随意使用和推特反馈。
答案 8 :(得分：1)
使用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();
};
})();
答案 9 :(得分：0)
这是一个非常简单的弹出窗口：
<!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。
答案 10 :(得分：0)
只有CSS POPUP LOGIC！试试吧。简单！我认为这个mybe在将来很受欢迎
<a href="#openModal">OPEN</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="close">X</a>
<h2>MODAL</h2>
</div>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
答案 11 :(得分：0)
让我们尝试一下...。如何使用HTML，CSS和jquery创建一个简单的弹出窗口...
# Load all sheets
workbook = pd.read_excel('file.xlsx', sheet_name=None)
# do something to workbook['sheet1']
# Write all sheets to excel file
writer = pd.ExcelWriter('file.xlsx', engine='xlsxwriter')
for sheet, df in workbook.items():
df.to_excel(writer, sheet_name=sheet)
writer.save()
import pandas as pd
fname = 'file.xlsx'
target_sheet = 'sheet1'
df = pd.read_excel('file.xlsx', sheet_name='sheet1')
# further modification to `df` ...
# Load required functions
from openpyxl import load_workbook
from openpyxl.utils.dataframe import dataframe_to_rows
# Read excel file (all sheets)
wb = load_workbook(fname)
# Get the index from target-sheet
idx = wb.sheetnames.index(target_sheet)
# Delete the existing target-sheet
del wb[target_sheet]
# Create a new empty target-sheet
wb.create_sheet(target_sheet, idx)
# Write `df` data on it
for r in dataframe_to_rows(df, index=False, header=True):
wb[target_sheet].append(r)
# Save file
wb.save(fname)