Een eenvoudige pop-up genereren met jQuery

Ik ontwerp een webpagina. Hoe kan ik een pop-upvenster tonen dat een e-maillabel en een tekstvak bevat wanneer we op de inhoud van div-name-mail klikken?


Antwoord 1, autoriteit 100%

Eerst de CSS – pas dit naar wens aan:

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

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

En tot slot de 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 is een jsfiddle-demo en implementatie.

Afhankelijk van de situatie wil je misschien de pop-upinhoud laden via een ajax-oproep. Het is het beste om dit indien mogelijk te vermijden, omdat het de gebruiker een grotere vertraging kan geven voordat hij de inhoud ziet. Hier zijn een paar wijzigingen die u wilt aanbrengen als u deze aanpak volgt.

HTML wordt:

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

En het algemene idee van JavaScript wordt:

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

Antwoord 2, autoriteit 41%

Bekijk jQuery UI Dialog. Je zou het als volgt gebruiken:

De jQuery:

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

De opmaak:

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

Klaar!

Houd er rekening mee dat dit ongeveer de eenvoudigste use-case is die er is, ik raad aan om de documentatieom een beter idee te krijgen van wat er precies mee gedaan kan worden.


Antwoord 3, autoriteit 9%

Ik gebruik een jQuery-plug-in genaamd ColorBox, het is

  1. Zeer gebruiksvriendelijk
  2. lichtgewicht
  3. aanpasbaar
  4. het mooiste pop-upvenster dat ik tot nu toe voor jQuery heb gezien

Antwoord 4, autoriteit 4%

Probeer de Magnific Pop-up, het is responsief en weegt slechts ongeveer 3 KB.


Antwoord 5, autoriteit 3%

Bezoek deze url

JQuery UI Dialog Demo’s


Antwoord 6, autoriteit 2%

Ik denk dat dit een is geweldige tutorialover het schrijven van een eenvoudige jQuery-pop-up. Bovendien ziet het er erg prachtig


Antwoord 7

Er is hier een goed, eenvoudig voorbeeld van: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial


Antwoord 8

Extreem lichtgewicht modale pop-up plug-in.
Popelt – http://welbour.com/labs/popelt/

Het is lichtgewicht, ondersteunt geneste pop-ups, objectgericht, ondersteunt dynamische knoppen, responsief en veel meer.
Volgende update bevat pop-up Ajax-formulierinzendingen enz.

Voel je vrij om feedback te gebruiken en te tweet.


Antwoord 9

Simple POPUP-venster met behulp van HTML5 en 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();  
            };
        })();

Antwoord 10

Laten we het proberen …. Hoe een eenvoudige pop-up te maken met behulp van HTML, CSS en JQuery …

$(function() {
    // Open Popup
    $('[popup-open]').on('click', function() {
        var popup_name = $(this).attr('popup-open');
 $('[popup-name="' + popup_name + '"]').fadeIn(300);
    });
    // Close Popup
    $('[popup-close]').on('click', function() {
 var popup_name = $(this).attr('popup-close');
 $('[popup-name="' + popup_name + '"]').fadeOut(300);
    });
    // Close Popup When Click Outside
    $('.popup').on('click', function() {
 var popup_name = $(this).find('[popup-close]').attr('popup-close');
 $('[popup-name="' + popup_name + '"]').fadeOut(300);
    }).children().click(function() {
 return false;
    });
});
body {
    font-family:Arial, Helvetica, sans-serif;
}
p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: #484848;
}
/* Popup Open button */ 
.open-button{
    color:#FFF;
    background:#0066CC;
    padding:10px;
    text-decoration:none;
    border:1px solid #0157ad;
    border-radius:3px;
}
.open-button:hover{
    background:#01478e;
}
.popup {
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
    width:100%;
    height:100%;
    display:none;
}
/* Popup inner div */
.popup-content {
    width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px;
    margin-top: 100px;
    box-shadow: 0px 2px 6px rgba(0,0,0,1);
    border-radius: 3px;
    background: #fff;
    position: relative;
}
/* Popup close button */
.close-button {
    width: 25px;
    height: 25px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 20px;
    background: rgba(0,0,0,0.8);
    font-size: 20px;
    text-align: center;
    color: #fff;
    text-decoration:none;
}
.close-button:hover {
    background: rgba(0,0,0,1);
}
@media screen and (max-width: 720px) {
.popup-content {
    width:90%;
    } 
}
<!DOCTYPE html>
<html>
<head>
 <title> Popup </title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head> 
<body>
    <a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup 
        Preview</a>
        <div class="popup" popup-name="popup-1">
            <div class="popup-content">
            <h2>Title of Popup </h2>
        <p>Popup 1 content will be here. Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit. Aliquam consequat diam ut tortor 
        dignissim, vel accumsan libero venenatis. Nunc pretium volutpat 
        convallis. Integer at metus eget neque hendrerit vestibulum. 
        Aenean vel mattis purus. Fusce condimentum auctor tellus eget 
        ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum. 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
            </div>
        </div>  
</body>
</html>

Antwoord 11

Hier is een zeer eenvoudige pop-up:

<!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="https://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>

Een flexibelere oplossing is te vinden in deze tutorial: http://www.jacklmoore .com/notes/jquery-modal-tutorial/
Hier is close.pngvoor het voorbeeld.


Antwoord 12

ALLEEN CSS POPUP-LOGICA! PROBEER HET TE DOEN. EENVOUDIG! Ik denk dat deze hack in de toekomst populair zal zijn

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

Other episodes