logo标签列表

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

javascriptjquerycssajaxpopup
225

我正在设计一个网页。当我们点击名为“mail”的

元素的内容时，如何展示一个包含电子邮件标签和文本框的弹出窗口？

1
我发现这个答案非常有用，可以在不触摸现有HTML或CSS的情况下快速生成警报。它使用jQuery从js创建和显示一个div。 - mabi
12个回答
251

首先来看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>

这是一个 jsfiddle 演示和实现。

根据情况，您可能希望通过 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
为了移除你添加的HTML，你需要将关闭方法更改为：$(".close").live('click', function() { $(".pop").slideFadeToggle(); $("#contact").removeClass("selected"); $(".pop").remove(); //加上这一行... return false; });这样可以解决在关闭弹出窗口之前多次点击链接时出现的问题。顺便说一句，这是一个非常好的答案，简洁而有效。 - Jonx
10
尝试连续点击“注册”按钮多次，然后点击“取消”。哦-噢。 - AVProgrammer
12
根据 jQuery 官网 的说法，自 jQuery 1.7 版本起，方法.live() 已被弃用。改用 .on() 方法来附加事件处理程序。使用较旧版本的 jQuery 的用户应优先使用 .delegate() 而不是 .live()。所以我用.on替换了.live。点击这里查看 Andy 代码的通用版本。另外，我在实际页面上使用了 CDN 链接来获取更新版本的 jQuery <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>。 - vulcan raven
分叉 Fiddle 以允许多个弹出窗口而不重复相同的核心 JQuery 代码。http://jsfiddle.net/N4QCZ/ 感谢 @KevSheedy 在这里提供的帮助：https://dev59.com/4m7Xa4cB1Zd3GeqPpGCB#14837043 - a coder
@vulcanraven 很显然，代码无法与更新版本的jquery一起工作。 - JJJ
显示剩余14条评论
106

请查看jQuery UI对话框。您可以像这样使用它：

jQuery代码：

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

这段标记：

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

完成！

请记住，这只是最简单的用法，建议阅读文档以更好地了解它的更多用途。

除了 jQuery 之外，我是否需要包含任何插件？@Karim - Rajasekar
9
您需要下载jQuery UI捆绑包，并至少包含ui.core.js和ui.dialog.js以获取一个对话框。如果您希望对话框可拖动和/或可调整大小，则需要包含ui.draggable.js和ui.resizable.js。 - karim79
6
嗯，如果有一个 jsfiddle 的话，答案会更好。 - Bryce
23

我使用一个叫做ColorBox的jQuery插件，它：

  1. 非常易于使用
  2. 轻量级
  3. 可定制
  4. 是我看过的最漂亮的jQuery弹出对话框了
9
9
4
我认为这是一篇写简单jQuery弹窗的优秀教程。此外，它看起来非常漂亮。
4

让我们尝试一下...如何使用 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>

我想问一下，这个答案对我非常有帮助，但我很好奇，当我们点击触发器时，弹出窗口如何改变为display:block？因为例如上面没有一个命令来改变它。谢谢。 - Heru Wijayanto
3

极其轻量级的弹出框插件。 POPELT - http://welbour.com/labs/popelt/

它非常轻巧，支持嵌套弹出框，面向对象，支持动态按钮，响应式等等。 下一个更新将包括弹出框Ajax表单提交等功能。

欢迎使用并推文反馈。

3
除了 jQuery，我还需要包含任何插件吗？@Karim - Rajasekar
2

使用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？ - Magiranu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接