如何使用jQuery生成一个简单的弹出窗口

我正在设计一个网页。当我们点击div命名邮件的内容，我怎么能显示一个弹出窗口包含标签电子邮件和文本框?

当前回答

我认为这是一个编写简单jquery弹出窗口的很好的教程。而且它看起来很漂亮

2012-07-27 09:03:17

其他回答

让我们试试....如何创建一个简单的弹出窗口使用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>

2020-11-25 04:36:48

访问这个网址

Jquery UI对话框演示

2012-03-03 01:00:22

简单的弹出窗口，使用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();  
            };
        })();

2016-06-04 09:55:50

尝试一下Magnific Popup，它反应灵敏，重量只有3KB左右。

2013-05-24 16:10:59

我使用的是一个叫做ColorBox的jQuery插件

非常容易使用轻量级可定制的这是我见过的jQuery最好的弹出对话框

2009-08-25 17:05:57

如何使用jQuery生成一个简单的弹出窗口

推荐文章

最新文章

标签