SORU
25 AĞUSTOS 2009, Salı


Ne kadar basit bir popup jQuery kullanarak oluşturmak için

Bir web sayfası tasarlıyorum. Biz div içeriğini mail adlı tıkladığınızda, popup pencere etiket e-posta ve metin kutusu içeren gösterebilir miyim?

CEVAP
25 AĞUSTOS 2009, Salı


Bu basit bir eklenti gerekmez. Bu kod, bir sürü gibi görünebilir ama aslında oldukça basit.

İlk CSS - tweak bu ancak senin gibi:

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

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

Ve son olarak 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.

Duruma bağlı olarak bir ajax çağrısı ile açılan içerik yüklemek isteyebilirsiniz. İçeriği görmeden kullanıcı daha önemli bir gecikme verebilir en iyi mümkünse bunu önlemek için. Burada birkaç eğer bu yaklaşım ise yapmak isteyeceğiniz değişiklikler.

HTML olur:

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

Ve JavaScript genel bir fikir olur:

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CommonArtisan

    CommonArtisa

    7 Temmuz 2012
  • HowcastFoodDrink

    HowcastFoodD

    21 EYLÜL 2010
  • SRC RECORDS

    SRC RECORDS

    2 EKİM 2006