如何使用 jQuery 生成一个简单的弹出窗口 [英] How to generate a simple popup using jQuery

问题描述

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

解决方案

首先是 CSS - 随心所欲地调整:

a.selected {背景色:#1F75CC；白颜色;z-索引:100；}.messagepop {背景色:#FFFFFF；边框:1px 实心 #999999;光标:默认；显示:无；边距顶部:15px；位置:绝对；文本对齐:左；宽度:394px；z-索引:50；填充:25px 25px 20px；}标签 {显示:块；底边距:3px；左边距:15px；文本缩进:-15px；}.messagepop p, .messagepop.div {边框底部:1px 实心 #EFEFEF；边距:8px 0；填充底部:8px；}

还有 JavaScript:

函数取消选择(e){$('.pop').slideFadeToggle(function() {e.removeClass('选中');});}$(函数(){$('#contact').on('click', function() {if($(this).hasClass('selected')) {取消选择($(this));} 别的 {$(this).addClass('selected');$('.pop').slideFadeToggle();}返回假；});$('.close').on('click', function() {取消选择($('#contact'));返回假；});});$.fn.slideFadeToggle = 函数(缓动，回调){return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);};

最后是 html:

<form method="post" id="new_message" action="/messages"><p><label for="email">您的电子邮件或姓名</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"/>或<a class="close" href="/">取消</a></p></表单>
<a href="/contact" id="contact">联系我们</a>

这是一个 jsfiddle 演示和实现.

根据情况，您可能希望通过 ajax 调用加载弹出内容.如果可能，最好避免这种情况，因为它可能会给用户带来更严重的延迟，然后才能看到内容.如果您采用这种方法，您需要进行以下几项更改.

HTML 变成:

<div class="messagepop pop"></div><a href="/contact" id="contact">联系我们</a>

JavaScript 的总体思路变为:

$("#contact").on('click', function() {if($(this).hasClass("selected")) {取消选择()；} 别的 {$(this).addClass("选中");$.get(this.href, function(data) {$(".pop").html(data).slideFadeToggle(function() {$("input[type=text]:first").focus();});}}返回假；});

I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?

解决方案

First the CSS - tweak this however you like:

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;
}

And the 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);
};

And finally the 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.

Depending on the situation you may want to load the popup content via an ajax call. It's best to avoid this if possible as it may give the user a more significant delay before seeing the content. Here couple changes that you'll want to make if you take this approach.

HTML becomes:

<div>
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a>
</div>

And the general idea of the JavaScript becomes:

$("#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;
});

这篇关于如何使用 jQuery 生成一个简单的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！