JQuery kullanarak basit bir açılır pencere oluşturma

Bir web sayfası tasarlıyorum. Mail adlı div içeriğini tıkladığımızda, bir etiket e-postası ve metin kutusu içeren bir açılır pencere nasıl gösterebilirim?

İlk önce CSS - bunu istediğiniz gibi düzenleyin:

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>

İşte bir jsfiddle demosu ve uygulaması.

Duruma bağlı olarak, açılır içeriği bir ajax çağrısı yoluyla yüklemek isteyebilirsiniz. Mümkünse bundan kaçınmak en iyisidir, çünkü içeriği görmeden önce kullanıcıya daha önemli bir gecikme verebilir. Burada, bu yaklaşımı uygularsanız yapmak isteyeceğiniz birkaç değişiklik.

HTML:

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

Ve JavaScript'in genel fikri:

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

Check out jQuery UI iletişim . Bunu şöyle kullanırsınız:

JQuery:

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

İşaretleme:

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

Bitti!

Bunun en basit kullanım durumu hakkında olduğunu aklınızda bulundurun, onunla ne yapılabileceği hakkında daha iyi bir fikir edinmek için belgeleri okumayı öneririm .

ColorBox adlı bir jQuery eklentisi kullanıyorum ,

1. Kullanımı çok kolay
2. hafif
3. özelleştirilebilir
4. jQuery için gördüğüm en güzel pop-up iletişim kutusu

Magnific Popup'ı deneyin, duyarlı ve 3KB ağırlığında.

Bu URL'yi ziyaret et

Jquery UI İletişim Kutusu Demoları

Bence bu basit bir jquery pop-up yazmak için harika bir öğretici . Artı çok güzel görünüyor

Tam olarak bunun iyi ve basit bir örneği var, burada: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Son derece Hafif Modal açılır pencere eklentisi. POPELT - http://welbour.com/labs/popelt/

Hafiftir, iç içe geçmiş pop-up'ları destekler, nesne yönelir, dinamik düğmeleri destekler, duyarlı ve çok daha fazlasını yapar. Bir sonraki güncelleme Popup Ajax form gönderimlerini vb. İçerecektir.

Kullanmaktan çekinmeyin ve geri bildirim tweet atın.

Html5 ve javascript kullanarak basit açılır pencere.

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

İşte çok basit bir açılır pencere:

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

: Daha esnek bir çözüm Bu eğitimde bulunabilir http://www.jacklmoore.com/notes/jquery-modal-tutorial/ oluyor İşte close.png numune için.

SADECE CSS POPUP MANTIĞI! DENEYİN. KOLAY! Sanırım bu mybe gelecekte popüler olacak

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