Wie erstelle ich einfache Popups mit jQuery?

Einfache Popups mit jQuery erstellen

Viele Webanwendungen erfordern die Möglichkeit, zusätzliche Informationen anzuzeigen oder Benutzereingaben zu ermöglichen, ohne die aktuelle Seite zu verlassen. Eine gängige Lösung hierfür ist die Verwendung eines Popup-Fensters. In diesem Artikel erfahren Sie, wie Sie mit jQuery ein einfaches Popup erstellen.

Anpassen des Erscheinungsbilds

Um das Erscheinungsbild des Popups anzupassen, passen Sie das folgende CSS an:

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;
Rand: 8px 0;
padding-bottom: 8px;
}

jQuery-Implementierung

Als nächstes implementieren Sie den jQuery-Code:

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, Rückruf);
};

HTML-Struktur

Zuletzt fügen Sie die HTML-Struktur hinzu, um das Popup anzuzeigen:

< ;bilden method="post">

<p><label for="email">Your email or name</label><input type="text" size="30" name="email">

Das obige ist der detaillierte Inhalt vonWie erstelle ich einfache Popups mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!