我正在设计一个网页。当我们点击div命名邮件的内容，我怎么能显示一个弹出窗口包含标签电子邮件和文本框?
当前回答
访问这个网址
Jquery UI对话框演示
其他回答
让我们试试....如何创建一个简单的弹出窗口使用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>
我使用的是一个叫做ColorBox的jQuery插件
非常容易使用 轻量级 可定制的 这是我见过的jQuery最好的弹出对话框
极其轻量级的模态弹出插件。 POPELT - http://welbour.com/labs/popelt/
它是轻量级的，支持嵌套弹出窗口，面向对象，支持动态按钮，响应式等等。 下一次更新将包括弹出Ajax表单提交等。
请随意使用并发布反馈。
只有CSS弹出逻辑!试着去做。简单!我想这在将来可能会很流行
<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);
}
这里有一个很好的简单的例子:http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
