jQuery로 간단한 팝업을 만드는 방법은 무엇입니까?

jQuery로 간단한 팝업 만들기

많은 웹 애플리케이션에는 추가 정보를 표시하거나 현재 페이지를 떠나지 않고도 사용자 입력을 허용하는 기능이 필요합니다. 이에 대한 일반적인 해결책은 팝업 창을 사용하는 것입니다. 이 글에서는 jQuery를 사용하여 간단한 팝업을 만드는 방법을 살펴보겠습니다.

모양 사용자 정의

팝업 모양을 사용자 정의하려면 다음 CSS를 조정하세요.

a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}

.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
커서 :default;
디스플레이:없음;
여백-상단: 15px;
위치:절대;
텍스트 정렬:왼쪽;
너비:394px;
z-index:50;
패딩: 25px 25px 20px;
}

라벨 {
디스플레이: 블록;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}

.messagepop p, .messagepop.div {
border-bottom : 1px 솔리드 #EFEFEF;
여백: 8px 0;
padding-bottom: 8px;
}

jQuery 구현

다음으로 jQuery 코드를 구현합니다.

function deselect(e) {
$('.pop').slideFadeToggle(함수() {

e.removeClass('selected');

});
}

$(function() {
$('#contact').on('click', function() {

if($(this).hasClass('selected')) {
  deselect($(this));               
} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
}
return false;

});

$('.close').on('클릭', function() {

deselect($('#contact'));
return false;

});
});

$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ 불투명도: ' 토글', 높이: '토글' }, '빠른', 완화, callback);
};

HTML 구조

마지막으로 HTML 구조를 추가하여 팝업을 표시합니다.

< ;형태 method="post">

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

위 내용은 jQuery로 간단한 팝업을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!