So generieren Sie mit jQuery ein einfaches Popup

Ich entwerfe eine Webseite. Wie kann ich ein Popup-Fenster mit einer Label-E-Mail und einem Textfeld anzeigen, wenn wir auf den Inhalt von div namens mail klicken?

Zuerst das CSS - optimieren Sie dies, wie Sie möchten:

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

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

Und zum Schluss das 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>

Hier ist eine jsfiddle-Demo und -Implementierung.

Je nach Situation möchten Sie den Popup-Inhalt möglicherweise über einen Ajax-Aufruf laden. Es ist am besten, dies nach Möglichkeit zu vermeiden, da dies dem Benutzer eine größere Verzögerung geben kann, bevor er den Inhalt sieht. Hier einige Änderungen, die Sie vornehmen möchten, wenn Sie diesen Ansatz wählen.

HTML wird:

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

Und die allgemeine Idee des JavaScript wird:

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

Schauen Sie sich den jQuery UI-Dialog an . Sie würden es so verwenden:

Die jQuery:

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

Das Markup:

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

Getan!

Denken Sie daran, dass dies der einfachste Anwendungsfall ist, den es gibt. Ich würde empfehlen, die Dokumentation zu lesen , um eine bessere Vorstellung davon zu bekommen, was damit getan werden kann.

Ich benutze ein jQuery - Plugin namens ColorBox , es ist

1. Sehr einfach zu bedienen
2. Leicht
3. anpassbar
4. Der schönste Popup-Dialog, den ich bisher für jQuery gesehen habe

Probieren Sie das Magnific Popup aus , es reagiert und wiegt nur etwa 3 KB.

Besuchen Sie diese URL

Jquery UI Dialog Demos

Ich denke, dies ist ein großartiges Tutorial zum Schreiben eines einfachen JQuery-Popups. Außerdem sieht es sehr schön aus

Hier gibt es ein gutes, einfaches Beispiel dafür: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Extrem leichtes modales Popup-Plugin. POPELT - http://welbour.com/labs/popelt/

Es ist leichtgewichtig, unterstützt verschachtelte Popups, ist objektorientiert, unterstützt dynamische Schaltflächen, reagiert und vieles mehr. Das nächste Update wird Popup Ajax-Formularübermittlungen usw. enthalten.

Fühlen Sie sich frei, Feedback zu verwenden und zu twittern.

Einfaches Popup-Fenster mit HTML5 und 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();  
            };
        })();

Hier ist ein sehr einfaches Popup:

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

Eine flexiblere Lösung finden Sie in diesem Tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Hier ist close.png für das Beispiel.

NUR CSS POPUP LOGIC! VERSUCHEN SIE ES. EINFACH! Ich denke, dass dies in Zukunft sehr beliebt sein wird

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