레이블이 지정된 이메일 텍스트 상자를 사용하여 간단한 jQuery 팝업을 만드는 방법은 무엇입니까?

jQuery로 간단한 팝업 만들기

웹 페이지를 디자인할 때 추가 정보나 콘텐츠를 팝업으로 표시하고 싶은 상황이 발생할 수 있습니다. 특정 사용자 작업 시 별도의 팝업 창을 표시합니다. 이 글에서는 레이블이 지정된 이메일 텍스트 상자를 표시하는 데 중점을 두고 jQuery를 사용하여 간단한 팝업을 만드는 과정을 안내합니다.

1단계: CSS 스타일링

먼저, CSS 스타일을 정의하여 팝업 모양을 사용자 정의합니다.

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

이 CSS는 팝업 요소, 즉 팝업 요소에 대한 스타일을 정의합니다. 팝업 내의 팝업, 레이블 및 단락 요소를 트리거합니다.

2단계: JavaScript 기능

다음으로 팝업 동작을 처리하는 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);
};

• deselect(): 이 함수는 팝업을 닫고 연결된 상태에서 선택한 상태를 제거합니다. element.
• $('#contact').on('click', ...): 이 이벤트 핸들러는 ID가 'contact'인 요소를 클릭할 때 팝업 표시 여부를 전환합니다.
• $('.close').on('click', ...): 이 이벤트 핸들러는 'close' 요소가 다음과 같을 때 팝업을 닫습니다. 클릭했습니다.
• $.fn.slideFadeToggle: 이 사용자 정의 기능은 팝업의 가시성을 부드럽게 페이드하고 토글합니다.

3단계: HTML 구조

마지막으로 팝업 및 링크의 HTML 구조를 정의합니다. 요소:

<div class="messagepop pop">
  <form method="post">

이 HTML은 이메일 입력 및 메시지 텍스트 영역이 포함된 양식과 ID가 '연락처'인 연결된 요소를 포함한 팝업 콘텐츠를 정의합니다.

이러한 단계를 결합하면 '문의하기' 링크를 클릭할 때 표시되고 레이블이 지정된 이메일 텍스트 상자가 포함된 간단한 팝업을 만들 수 있습니다. 이 기술은 특정 요구 사항에 맞게 쉽게 사용자 정의하고 조정할 수 있습니다.

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