it-swarm.com.de

So erstellen Sie ein einfaches Popup mit jQuery

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

212
Rajasekar

Zuerst das CSS - Tweak dies wie es dir gefällt:

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 noch 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 möglicherweise den Popup-Inhalt über einen Ajax-Aufruf laden. Es ist am besten, dies möglichst zu vermeiden, da der Benutzer möglicherweise eine längere Verzögerung erhält, bevor er den Inhalt sieht. Hier einige Änderungen, die Sie vornehmen möchten, wenn Sie diesen Ansatz wählen.

HTML wird zu:

<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;
});
238
Andy Gaskell

Check out jQuery UI Dialog . 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>

Erledigt!

Denken Sie daran, dass dies in etwa der einfachste Anwendungsfall ist. Ich würde empfehlen, die documentation zu lesen, um eine bessere Vorstellung davon zu bekommen, was mit ihr möglich ist. 

96
karim79

Ich benutze ein jQuery-Plugin namens ColorBox , das ist es 

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

Besuchen Sie diese URL

Jquery UI Dialog Demos

8
Yanni

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

8
Marvin3

Ich denke, das ist ein tolles Tutorial beim Schreiben eines einfachen Jquery-Popup Plus sieht es sehr schön aus

4
andy boot

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

3
Evernoob

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

Es ist leichtgewichtig, unterstützt verschachtelte Popups, objektorientiert, unterstützt dynamische Schaltflächen, responsiv und vieles mehr .. Das nächste Update enthält Popup-Ajax-Formularvorlagen usw.

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

3
Elton Jain

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

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.

0
John29

NUR CSS POPUP-LOGIK! VERSUCHEN SIE ES. EINFACH! Ich denke, dass dies in Zukunft populär 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);
}
0
zloctb