我使用Fancybox变形模式打开我的联系表单。 它工作正常，但： 当我点击输入发送表单时，即使字段尚未填写（因此未发送电子邮件），Fancybox也会关闭
除非我们点击十字架，否则我希望模态不要关闭。
感谢您的帮助
以下是代码：
<?php
if(isset($_POST["send"])){
$nom = $_POST["nom"];
$emetteur = $_POST["emetteur"];
$message = $_POST["message"];
if(empty($nom)){
$erreurNom = "Vous devez renseigner votre nom.";
}
if(empty($message)){
$erreurMessage = "Vous devez renseigner votre message.";
}
if(empty($emetteur)){
$erreurEmetteur = "Vous devez renseigner votre adresse mail.";
}else{
if( !filter_var($emetteur, FILTER_VALIDATE_EMAIL)){
$erreurEmetteur = "Vous devez renseigner votre adresse mail valide.";
}
}
if(
(!isset($erreurNom)) &&
(!isset($erreurEmetteur)) &&
(!isset($erreurMessage)) )
{
$nom = addslashes(strip_tags($nom));
$emetteur = addslashes(strip_tags($emetteur));
$message = addslashes(strip_tags($message));
$messageNom = $message."\n\r".$nom;
$headers = 'From:'. $emetteur . "\r\n" .
'Reply-To: ' . $emetteur . "\r\n" .
'X-Mailer: PHP/' . phpversion();
// mail( email du destinataire, objet, message, optionel les headers )
if( mail("xxx@gmail.com", "Message de contact depuis le site Eilah Design", $messageNom, $headers) ){
$succes = "Merci ! Votre message a bien été envoyé. Votre demande sera traitée dans les meilleurs délais.";
if( $bdd = mysqli_connect("xxx", "xxx", "xxx", "sss") ){
mysqli_set_charset($bdd, "utf8");
$date_envoi = date("Y/m/d H:i:s");
mysqli_query($bdd, "INSERT INTO formulaire_de_contact (id,nom,emetteur,message,date_envoi) VALUES (NULL, \"$nom\", \"$emetteur\", \"$message\", \"$date_envoi\" ) ");
mysqli_close($bdd);
}
}else{
$erreur = "Une erreur est survenue, veuillez réessayer plus tard.";
}
}
}
?>
<div class="form" id="contact">
<div class="container">
<h3>N'hésitez pas à être précis dans votre demande.</h3>
<span class="ih3">
<i class="icon_comment_alt" aria-hidden="true"></i>
</span>
<h2>Formulaire de contact</h2>
<form action="#contact" method="post">
<div class="ligne">
<div class="block">
<input type="text" name="nom" placeholder="Votre nom" value="<?php if(isset($nom)){ echo $nom; } ?>">
<?php
if(isset($erreurNom)){
echo "<span class=\"error\">".$erreurNom."</span>";
}
?>
</div>
<div class="blocklast">
<input type="email" name="emetteur" placeholder="Votre mail" value="<?php if(isset($emetteur)){ echo $emetteur; } ?>">
<?php
if(isset($erreurEmetteur)){
echo "<span class=\"error\">".$erreurEmetteur."</span>";
}
?>
</div>
</div>
<textarea name="message" placeholder="Votre message"><?php if(isset($message)){ echo $message; } ?></textarea>
<?php
if(isset($erreurMessage)){
echo "<span class=\"error\">".$erreurMessage."</span>";
}
?>
<input type="submit" value="envoyer" name="send" class="send">
<?php
if(isset($succes)){
echo "<div class=\"succes\">".$succes."</div>";
}
if(isset($erreur)){
echo "<div class=\"error\">".$erreur."</div>";
}
?>
</form>
</div>
</div>
我没有触及fancybox-morphing-modal.js的代码，但这里是：
$(document).ready(function() {
/*
Advanced example - Morphing modal window
See demo on CodePen: http://codepen.io/fancyapps/pen/vxLVJE
*/
var Morphing = function( $btn ) {
this._init( $btn );
};
Morphing.prototype._init = function( $btn ) {
var that = this;
that.$btn = $btn.width( $btn.width() ).addClass('morphing-btn');
// Add wrapping element and set initial width used for positioning
$btn.wrap(function() {
var $wrap = $('<div class="morphing-btn-wrap"></div>');
$wrap.width( $(this).outerWidth( true ) );
return $wrap;
});
that.$clone = $('<div />')
.hide()
.addClass('morphing-btn-clone')
.insertAfter( $btn );
$btn.on('click', function(e) {
e.preventDefault();
that.open();
});
};
Morphing.prototype.open = function() {
var that = this;
if ( that.$btn.hasClass('morphing-btn_circle') ) {
return;
}
// First, animate button to the circle
that.$btn.one("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
if ( e.originalEvent.propertyName !== 'width' ) {
return;
}
$(this).off(".fm");
that._animate();
});
that.$btn.width( that.$btn.width() ).addClass('morphing-btn_circle');
};
Morphing.prototype._animate = function() {
var that = this;
var $btn = that.$btn;
var $clone = that.$clone;
var scale = this._retrieveScale( $btn );
var pos = $btn[0].getBoundingClientRect();
$clone.css({
top : pos.top + $btn.outerHeight() * 0.5 - ( $btn.outerHeight() * scale * 0.5 ),
left : pos.left + $btn.outerWidth() * 0.5 - ( $btn.outerWidth() * scale * 0.5 ),
width : $btn.outerWidth() * scale,
height : $btn.outerHeight() * scale,
transform : 'scale(' + 1 / scale + ')'
});
$clone.one("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
$(this).off(".fm");
// Open fancyBox
$.fancybox.open({ src : $btn.data('src') || $btn.attr('href') }, {
infobar : false,
buttons : false,
smallBtn : false,
touch : false,
onInit : function( instance ) {
instance.$refs.slider_wrap.append('<button class="morphing-close" data-fancybox-close>X</button>');
instance.$refs.bg.remove();
},
afterClose : function() {
that.close();
}
});
});
// Trigger expanding of the cloned element
$clone.show().addClass('morphing-btn-clone_visible');
};
Morphing.prototype.close = function() {
var that = this;
var $btn = that.$btn;
var $clone = that.$clone;
var scale = that._retrieveScale( $btn );
var pos = $btn[0].getBoundingClientRect();
$clone.css({
top : pos.top + $btn.outerHeight() * 0.5 - ( $btn.outerHeight() * scale * 0.5 ),
left : pos.left + $btn.outerWidth() * 0.5 - ( $btn.outerWidth() * scale * 0.5 ),
width : $btn.outerWidth() * scale,
height : $btn.outerHeight() * scale,
transform : 'scale(' + ( 1 / scale ) + ')'
});
$clone.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
$clone.hide();
$btn.removeClass('morphing-btn_circle');
});
$clone.removeClass('morphing-btn-clone_visible');
};
Morphing.prototype._retrieveScale = function( $btn ) {
var rez = Math.max( $(window).height() * 2 / $btn.height() , $(window).width() * 2 / $btn.width() );
return rez;
};
$.fn.fancyMorph = function( duration ) {
this.each(function() {
var $this = $(this);
if ( !$this.data('morphing') ) {
$this.data('morphing', new Morphing( $this ));
}
});
return this;
};
$("[data-morphing]").fancyMorph();
});