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

Posted 2023-02-22

技术标签:

【中文标题】如何使用 jQuery 生成一个简单的弹出窗口【英文标题】：How to generate a simple popup using jQuery 【发布时间】：2010-11-22 15:48:15 【问题描述】：

我正在设计一个网页。当我们点击名为 mail 的 div 内容时，如何显示一个包含标签电子邮件和文本框的弹出窗口？

【问题讨论】：

我发现这个answer 对于快速警报非常有用，而无需触及现有的 html 或 CSS。它只使用来自 js 的 jQuery 创建并显示一个 div。 【参考方案1】：

让我们试试……如何使用 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>

【讨论】：

我想问..这个答案对我很有帮助..但我很好奇..当我们单击触发器时弹出窗口如何更改显示：阻止？原因例如上面没有一个命令可以改变它..谢谢..【参考方案2】：

首先是 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;
);

【讨论】：

它的工作，谢谢。但我将包括另一个按钮呼叫寄存器。单击它时，应弹出注册表单。为此，我包含了相同的功能并更改了 id 和类的名称。问题是当我单击注册表单的关闭按钮时，它会切换联系表。需要帮助@jason Davis 要删除关闭时添加的 html，请将关闭方法更改为 $(".close").live('click', function() $(".pop").slideFadeToggle() ; $("#contact").removeClass("selected"); $(".pop").remove(); //添加这个... return false; );这将纠正您在关闭弹出窗口之前多次单击链接时遇到的问题。顺便说一句，答案很好，简洁明了... @yahelc 尝试连续点击多次“注册”，然后点击“取消”。呜呜呜。我不太同意“伟大的代码”部分。很多内容都被硬编码到 javascript 中。是的，我们现在的浏览器中都有 javascript，但这并不是做 web 的正确方式。 HTML 用于内容，js 用于“化妆”。从我的角度来看，Karim79 的答案更好。将您的标记包含在它所属的 HTML 中，隐藏它，然后将其显示并作为弹出窗口显示。比直接从 javascript 打印大量 HTML 更清洁的解决方案。如果你不需要它，你不必使用 jQueryUI，有一百万种方法可以将一些内容放在弹出窗口中根据jQuery website，从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用.on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。。所以我用 .on 替换了 .live。 Click here to see a more generic version of Andy's code。此外，我在实际页面<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script> 上使用了最新版本的 jQuery 的 CDN 链接【参考方案3】：

只有 CSS 弹出逻辑！试一试。简单！我认为这 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);

【讨论】：

它没有关闭！【参考方案4】：

使用 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();  
            ;
        )();

【讨论】：

我收到 TypeError: dialog.show is not a function 错误。你能包含一个 JSFiddle 吗？【参考方案5】：

我认为这是 great tutorial 编写一个简单的 jquery 弹出窗口。而且看起来很beautiful

【讨论】：

【参考方案6】：

非常轻量级的模态弹出插件。波佩特-http://welbour.com/labs/popelt/

它是轻量级的，支持嵌套弹出窗口、面向对象、支持动态按钮、响应式等等。下一次更新将包括 Popup Ajax 表单提交等。

随意使用和推特反馈。

【讨论】：

【参考方案7】：

这是一个非常简单的弹出窗口：

<!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。

【讨论】：

【参考方案8】：

试试Magnific Popup，它反应灵敏，大小只有 3KB 左右。

【讨论】：

【参考方案9】：

访问此网址

Jquery UI Dialog Demos

【讨论】：

【参考方案10】：

我使用了一个名为ColorBox的jQuery插件，它是

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

【讨论】：

【参考方案11】：

这里有一个很好的简单示例：http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

【讨论】：

除了Jquery我是否必须包含任何插件？ @卡里姆【参考方案12】：

查看jQuery UI Dialog。你可以这样使用它：

jQuery：

$(document).ready(function() 
    $("#dialog").dialog();
);

标记：

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

完成！

请记住，这是最简单的用例，我建议阅读documentation 以更好地了解可以用它做什么。

【讨论】：

除了Jquery我是否必须包含任何插件？ @卡里姆 @Rajasekar - 您需要下载 jQuery UI 包，至少包括 ui.core.js 和 ui.dialog.js 才能获得对话。如果您希望对话可拖动和/或调整大小，则需要包含 ui.draggable.js 和 ui.resizable.js。嗯。使用 jsfiddle 会是一个更好的答案。

以上是关于如何使用 jQuery 生成一个简单的弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Chrome Inspector 显示 jquery 插件的弹出 css

关闭jQUERY中的弹出窗口后如何刷新父页面？ [复制]

我如何创建一个简单的弹出窗口来为我的应用程序提供说明？

jquery如何弹出一个新页面？

简单的弹出拖拽窗口

使用 jQuery 的具有复杂功能的弹出窗口