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

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

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

【问题讨论】：

  • 我发现这个answer 对于快速警报非常有用，而无需触及现有的 HTML 或 CSS。它只使用来自 js 的 jQuery 创建并显示一个 div。

标签： javascript jquery css ajax popup


【解决方案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。此外，我在实际页面&lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"&gt;&lt;/script&gt; 上使用了最新版本的 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插件，它是

            1. 非常易于使用
            2. 轻量级
            3. 可定制
            4. 我见过的最好的 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 会是一个更好的答案。
              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2017-03-02
              • 2011-10-20
              • 1970-01-01
              • 2014-05-28
              相关资源
              最近更新 更多
              热门标签
              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode