찾다
웹 프론트엔드JS 튜토리얼jQuery fancybox 플러그인을 사용하여 실용적인 데이터 전송 모달 팝업 form_jquery 만들기

모달 형식은 웹 개발자가 인터페이스를 디자인할 때 데이터를 전송하기 위해 자주 사용하는 방법이 되었습니다. 모달 창을 사용하면 웹사이트의 유용성을 향상시킬 수 있습니다. 프로젝트 요구 사항에 맞춰 고객이 웹사이트에 피드백을 제출할 수 있는 모달 팝업 양식을 원했고, 몇 가지 테스트를 거쳐 jQuery를 사용했습니다. 🎜> fancybox 플러그인 아름다운 모달 양식을 생성하려면 양식 데이터를 제출하고 서버 측에서 Ajax 호출을 구현하세요. 이메일

html 코드
헤더 부분의 주요 JS 파일은 다음과 같습니다. jquery 코드와 fancybox 코드가 소개되어 있습니다





데모먼저 공식 홈페이지에서 최신 Fancybox를 다운로드하세요
, 압축을 풀어주세요. 여기에 숨겨진 DIV가 있습니다. 사용자가 href 링크를 클릭하면 모달 창이 열립니다.
모달 창에서 피드백을 보내주세요.

가능한 경우 저를 클릭하세요 div>


메시지 보내기 >



🎜>

;/form> ;






CSS 스타일 시트

텍스트 상자 색상, 크기, 초점이 맞춰진 스타일 등을 설정합니다. :hover

:active를 사용하세요. 상태를 표시합니다. 코드 복사

코드는 다음과 같습니다. .txt { display: inline -block; 색상:
너비: 420px;
글꼴 계열: Arial, Tahoma, sans-serif;
여백: 10px; ccc;
패딩: 5px 9px;
글꼴 크기: 1.2em;
줄 높이: 1.4em;
.txtarea {
디스플레이: 블록;
크기 조정: 없음;
색상:
글꼴 계열: Arial, Tahoma, sans-serif
여백:
너비:
높이 : 150px;
테두리: 1px 점선 #ccc;
글꼴 크기: 1.2em;
}

.txt :focus,
.txtarea:focus {
테두리 스타일: 단색
테두리 색상: #bababa;
색상: #444; >input.error,
textarea.error {
border-color: #973d3d;
border-style: solid
color: #a35959; }

input.error:focus,
textarea.error:focus {
border-color: #973d3d
color:
}


我定义了一个错误的css类,结合jquery用来检测用户输入的数据是否正确,输入错误数据会使字段文字,边框和背景变成深色。直到用户输入有效的数据字段颜色将恢复正常。

复制代码 代码如下:

#send {
color: #dee5f0;
display: block;
cursor: pointer;
padding: 5px 11px;
font-size: 1.2em;
border: solid 1px #224983;
border-radius: 5px;
background: #1e4c99;
background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d));
background: -moz-linear-gradient(top, #2f52b7, #0e3a7d);
background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);
background: -o-linear-gradient(top, #2f52b7, #0e3a7d);
background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);
background: linear-gradient(top, #2f52b7, #0e3a7d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d');
}

#send:hover {
background: #183d80;
background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b));
background: -moz-linear-gradient(top, #284f9d, #0c2b6b);
background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);
background: -o-linear-gradient(top, #284f9d, #0c2b6b);
background: -ms-linear-gradient(top, #284f9d, #0c2b6b);
background: linear-gradient(top, #284f9d, #0c2b6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');
}

#send:active {
color: #8c9dc0;
background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7));
background: -moz-linear-gradient(top, #0e387d, #2f55b7);
background: -webkit-linear-gradient(top, #0e387d, #2f55b7);
background: -o-linear-gradient(top, #0e387d, #2f55b7);
background: -ms-linear-gradient(top, #0e387d, #2f55b7);
background: linear-gradient(top, #0e387d, #2f55b7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');
}

CSS 按钮我使用 CSS3来创建线型渐变,代码如上

使用 Fancybox

页面加载元素完成之后,调用Fancybox默认代码

复制代码 代码如下:

$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });//禁用默认的窗体提交

代码的第二行禁用默认的联系人表单提交动作。为什么呢?因此这样我们可以处理自己的单击事件,并通过 Ajax 传递数据。在用户提交表单后,我们需要得到 (电子邮件和消息) 两个字段的当前值。我们还想要检查电子邮件地址是否有效和消息长度是否超过规定的长度值
复制代码 代码如下:

$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);

if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}

if(msglen $("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}

上面jquery代码使用一些逻辑语句。直到电子邮件有效和消息的长度超过 4 个字母,才会提交表单。

发送Ajax 请求
通过上面的onclick事件,需要将表单数据发送到 PHP。,我们将在我们的收件箱中收到电子邮件。
코드 복사 코드는 다음과 같습니다.

// 두 필드가 확인되면, 다음 메시지 보내기

//보내기 버튼을 클릭하면 버튼이 "보내기"와 같은 텍스트 프롬프트로 대체됩니다. 이는 사용자가 제출을 클릭하는 것을 방지하고 프롬프트를 더욱 사용자 친화적으로 만드는 것입니다.

$("# send").replaceWith("보내는 중...")
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact ").fadeOut("fast", function(){
$(this).before("

제출 성공! 메시지가 전송되었습니다. 감사합니다. 당신:)< ;/p>");

setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});


여기에서는 serialize() 메서드를 사용하여 제출된 Ajax 데이터를 직렬화하여 표준 URL 인코딩이 생성됩니다.
서버가 성공적으로 응답한 후 팝업창을 숨기고 성공 메시지를 표시합니다. fancybox를 닫으려면 setTimeout() 메서드를 사용합니다. 여기서는 1초 후에 양식이 숨겨지도록 설정했습니다. 이를 수행하는 JS 코드는 $.fancybox.close()입니다.

PHP를 사용하여 이메일 보내기
sendmessage.php는 사용자가 입력한 변수를 허용합니다. 그런 다음 메일을 호출하여 전송을 시도하면 전송이 성공하면 "true"가 반환되고 그렇지 않으면 false가 반환됩니다.
코드 복사 코드는 다음과 같습니다.

$sendto = "2495371937@qq.com";//이메일 수신자 정의
$usermail = $_POST ['email'];//이메일 받기
$content = nl2br($_POST['msg']);//메시지 받기

$subject = "새 메시지가 있습니다";
$headers = "보낸 사람: " . "rn";
$headers .= "답장: ".
$headers .= "MIME 버전: 1.0raan";
$ 헤더 .= "콘텐츠 유형: text/html;charset=utf-8 rn"

$msg = ""; $msg .= "

새 메시지가 있습니다

rn"
$msg .= "보낸 사람: ".$usermail ."rn";
$msg .= "콘텐츠: ".$content."rn";
$ msg .= "";
if(@mail ($sendto, $subject, $msg, $headers)) {
echo "true"
} else {
echo "false";
}


데모

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
两个iphone怎么传输所有数据 详细讲解:迁移旧手机数据 的方法两个iphone怎么传输所有数据 详细讲解:迁移旧手机数据 的方法Mar 18, 2024 pm 06:31 PM

很多朋友朋友在更换苹果手机时,想把旧手机内的所有数据全部导入到新手机里,理论上是完全可行的,但在实际操作中是无法做到“转移所有”数据的,本期文章列举几种“转移部分数据”的方法。一、iTunesiTunes是苹果手机预装的软件,可用于迁移旧手机中的所有数据,但需要与电脑配合使用。可通过在电脑上安装iTunes,然后通过数据线连接手机和电脑,使用iTunes进行备份手机内的应用和数据,最后将备份恢复到新的苹果手机上来完成迁移。二、iCloudiCloud是苹果专属的“云空间”工具,可以先在旧手机内登

React API调用指南:如何与后端API进行交互和数据传输React API调用指南:如何与后端API进行交互和数据传输Sep 26, 2023 am 10:19 AM

ReactAPI调用指南:如何与后端API进行交互和数据传输概述:在现代的Web开发中,与后端API进行交互和数据传输是一个常见的需求。React作为一个流行的前端框架,提供了一些强大的工具和功能来简化这一过程。本文将介绍如何使用React来调用后端API,包括基本的GET和POST请求,并提供具体的代码示例。安装所需的依赖:首先,确保在项目中安装了Axi

Java API 开发中使用 Https 进行数据传输Java API 开发中使用 Https 进行数据传输Jun 18, 2023 pm 10:43 PM

随着科技的发展,网络通信已经成为了现代社会信息传输的重要工具之一。但同时,网络上的信息传输面临着被恶意攻击和窃取的风险,因此安全性显得尤为重要。基于此,HTTPS协议就应运而生。它是在HTTP协议上加入SSL/TLS加密的方式来保证网络传输安全性的一种协议。Java作为一门广泛应用于网络开发的语言,自然也提供了丰富的API来支持HTTPS协议。本文将

PHP trait DTO:优化数据传输过程的关键工具PHP trait DTO:优化数据传输过程的关键工具Oct 12, 2023 pm 02:33 PM

PHPtraitDTO:优化数据传输过程的关键工具,需要具体代码示例概述:在PHP开发中,数据传输是一项非常常见的任务,例如将数据从控制器传递给视图、将数据从接口传递给前端等。然而,在传输数据的过程中,往往需要对数据进行处理、转换和封装,这可能会导致代码冗余和不易维护。为了解决这个问题,我们可以使用PHPtraitDTO(DataTransfer

PHP trait DTO:优化数据传输过程的关键利器PHP trait DTO:优化数据传输过程的关键利器Oct 12, 2023 pm 03:10 PM

PHPtraitDTO:优化数据传输过程的关键利器,需要具体代码示例简介:在开发过程中,数据传输是一个非常常见的需求,尤其是在不同层级之间传递数据时。在传输这些数据过程中,我们常常需要对数据进行处理、验证或者转换,以满足不同的业务需求。为了提高代码的可读性和可维护性,我们可以使用PHPtraitDTO(DataTransferObject)来优化

C++在嵌入式系统开发中的外围设备控制与数据传输功能实践C++在嵌入式系统开发中的外围设备控制与数据传输功能实践Aug 25, 2023 pm 07:10 PM

C++在嵌入式系统开发中的外围设备控制与数据传输功能实践引言:嵌入式系统作为一个应用领域广泛的技术,它广泛应用于许多领域,如汽车、家电、医疗设备等。在嵌入式系统开发中,外围设备控制和数据传输是一个非常重要的功能。本文将介绍如何使用C++语言实现外围设备的控制和数据传输功能,并提供实际的代码示例。一、C++外围设备控制功能实践在嵌入式系统中,外围设备控制是指通

PHP中如何调用API接口以实现数据的传输和处理?PHP中如何调用API接口以实现数据的传输和处理?Sep 06, 2023 am 08:21 AM

PHP中如何调用API接口以实现数据的传输和处理?随着互联网的发展,各种Web服务和API接口的使用越来越普遍。API(应用程序编程接口)是一种允许不同应用程序之间进行数据交互的技术规范。PHP作为一种广泛应用于Web开发的脚本语言,具备强大灵活的API调用能力。本文将介绍如何使用PHP语言调用API接口以实现数据的传输和处理。一、准备工作在开始调用API之

PHP加密确保通信安全PHP加密确保通信安全Jun 30, 2023 pm 10:36 PM

如何使用PHP加密数据传输以确保通信安全随着互联网的不断发展,数据传输的安全性成为了一个持续受到关注的话题。在数据传输过程中,如果不进行加密,那么数据很容易被恶意截取,导致私人信息泄露或者数据篡改。因此,使用加密技术保证数据传输的安全性变得非常重要。PHP作为一种广泛使用的服务器端编程语言,可以在网站开发中起到很大的作用。PHP提供了多种加密数据传输的方法和

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전