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

217

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?

Rajasekar
źródło
1
Uważam, że ta odpowiedź jest bardzo przydatna w przypadku szybkich alertów bez dotykania istniejącego kodu HTML lub CSS. Tworzy i pokazuje div używając jQuery z js.
mabi

Odpowiedzi:

241

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;
});
Andy Gaskell
źródło
Działa, dziękuję. Ale zamierzam dołączyć kolejny rejestr połączeń z przyciskami. po kliknięciu formularz rejestracyjny powinien się wyskoczyć. W tym celu zawarłem tę samą funkcję i zmieniłem nazwę identyfikatorów i klas. Problem polega na tym, że kiedy kliknę przycisk zamykania formularza rejestracyjnego, przełącza on formularz kontaktowy. Potrzebujesz pomocy @jason Davis
Rajasekar
1
aby usunąć HTML, który dodajesz przy zamykaniu, zmień metodę zamykania na $ („. zamknij”). live („kliknij”, function () {$ („. pop”). slideFadeToggle (); $ („# contact”) .removeClass („selected”); $ („. pop”). remove (); // dodaj to ... zwróć false;}); poprawi to problem, który pojawi się, gdy klikniesz link więcej niż jeden raz przed zamknięciem wyskakującego okienka. przy okazji fajna odpowiedź, zręczna i prosta ...
Jonx
10
@yahelc Spróbuj kliknąć kilkakrotnie „Zarejestruj się”, a następnie kliknij „Anuluj”. Ooooooooo
AVProgrammer
Nie do końca zgadzam się z częścią „świetny kod”. Wiele treści jest zapisanych na stałe w javascript. Tak, wszyscy mamy tam javascript w naszych przeglądarkach, ale po prostu nie jest to właściwy sposób na tworzenie stron internetowych. HTML jest dla treści, js dla „makijażu”. Odpowiedź Karim79 jest lepsza z mojej perspektywy. Uwzględnij swój znacznik w kodzie HTML, gdzie należy, ukryj go, po prostu pokaż go i wyświetl jako wyskakujące okienko. Znacznie czystsze rozwiązanie niż drukowanie dużej ilości HTML bezpośrednio z javascript. Nie musisz używać jQueryUI, jeśli go nie potrzebujesz, istnieje milion sposobów na umieszczenie zawartości w wyskakującym
okienku
12
Według strony internetowej jQuery , od jQuery 1.7 metoda .live () jest przestarzała. Użyj .on (), aby dołączyć moduły obsługi zdarzeń. Użytkownicy starszych wersji jQuery powinni używać .delegate () zamiast .live (). . Więc wymieniłem .live z .Na . Kliknij tutaj, aby zobaczyć bardziej ogólną wersję kodu Andy'ego . Użyłem również łącza CDN do nowszej wersji jQuery na rzeczywistej stronie<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
vulcan raven
98

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ć.

karim79
źródło
Inne niż Jquery, czy muszę dołączyć jakąkolwiek wtyczkę? @Karim
Rajasekar,
8
@Rajasekar - Musisz pobrać pakiet interfejsu użytkownika jQuery i co najmniej zawierać pliki ui.core.js i ui.dialog.js, aby uzyskać Dialog. Jeśli chcesz, aby okno dialogowe można było przeciągać i / lub zmieniać rozmiar, musisz dołączyć pliki ui.draggable.js i ui.resizable.js.
karim79
6
Hmm Byłaby lepsza odpowiedź z jsfiddle.
Bryce
23

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
JasonDavis
źródło
9

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

Marvin3
źródło
4

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

Andy boot
źródło
3

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.

Elton Jain
źródło
2

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();  
            };
        })();
Arshid KV
źródło
Dostaję TypeError: dialog.show is not a functionbłąd. Czy możesz podać JSFiddle?
Magiranu,
0

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.

John29
źródło
0

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);
}
zloctb
źródło
Nie zamyka się!
vy32