Jak wygenerować proste wyskakujące okienko za pomocą jQuery

Projektuję stronę internetową. Kiedy klikamy treść o nazwie div div, jak mogę wyświetlić wyskakujące okienko zawierające e-mail z etykietą i pole tekstowe?

Najpierw CSS - dostosuj to, jak chcesz:

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

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

I na koniec 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>

Oto demo i implementacja jsfiddle.

W zależności od sytuacji możesz załadować zawartość wyskakującego okienka za pomocą wywołania ajax. Najlepiej tego unikać, jeśli to możliwe, ponieważ może to dać użytkownikowi większe opóźnienie przed obejrzeniem treści. Oto kilka zmian, które będziesz chciał wprowadzić, jeśli zastosujesz to podejście.

HTML staje się:

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

A ogólną ideą JavaScript jest:

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

Sprawdź okno dialogowe jQuery UI . Użyłbyś tego w ten sposób:

JQuery:

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

Znaczniki:

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

Gotowe!

Pamiętaj, że chodzi o najprostszy dostępny przypadek użycia. Sugeruję przeczytanie dokumentacji, aby uzyskać lepszy pomysł na to, co można z tym zrobić.

Używam jQuery plugin o nazwie ColorBox , to

1. Bardzo łatwy w użyciu
2. lekki
3. konfigurowalny
4. najładniejsze okienko wyskakujące, jakie widziałem dla jQuery

Wypróbuj Magnific Popup , jest responsywny i waży około 3 KB.

Odwiedź ten adres URL

Demonstracje okna dialogowego interfejsu użytkownika Jquery

Myślę, że to świetny samouczek na temat pisania prostego wyskakującego okienka. Plus wygląda bardzo pięknie

Oto dobry, prosty przykład tego, tutaj: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Niezwykle lekka modalna wtyczka popup. POPELT - http://welbour.com/labs/popelt/

Jest lekki, obsługuje zagnieżdżone wyskakujące okienka, zorientowany obiektowo, obsługuje dynamiczne przyciski, reaguje i wiele więcej. Następna aktualizacja będzie zawierać formularze Popup Ajax itp.

Zapraszam do korzystania i tweetowania opinii.

Proste okno wyskakujące przy użyciu HTML5 i 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();  
            };
        })();

Oto bardzo proste wyskakujące okienko:

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

Bardziej elastyczne rozwiązanie można znaleźć w tym samouczku: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Oto close.png dla próbki.

TYLKO LOGIKA POPUP CSS! SPRÓBUJ TO. ŁATWO! Myślę, że to może być hack popularne w przyszłości

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