bootstrap modal contact form issues
Question
I'm having issues with a bootstrap modal contact form, everything seems to work as planned in all browsers except on iPad/safari, can anyone please shed any light on where I'm going wrong?
When viewing on iPad the modal is offset to the right and moved down the page, not sitting in the middle where it should be.
When user selects a field in the form the cursor is not in the field itself, it is located outside of the modal window flashing in the greyed out background.
When user types in a field the text is not shown within the field until the next field is selected, then the text appears.
As I said everything is working fine in IE and Chrome these issues only occur with safari. Something is breaking my layout when viewed with Apple device.
Page can be viewed at http://odds-uk.co.uk/abbeystone/contact.php
There's quite a lot going on in the page with validation, modals, maps and tabs etc. so I wonder if I have a conflict somewhere I'm fairly new to web programming (year 2 degree student) so please forgive any stupid errors, I do hope someone can help as I'm stumped for ideas at present. Thankyou in advance. Roy
<!DOCTYPE HTML>
<html>
<head>
<!-- Include Google map API link -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDe94CcWCoY8mk1niRhZLBNc5bxst5CZNg"></script>
<!--<meta name="description" http-equiv="Content-Type" content="text/html;">-->
<!-- Website Title & Description for Search Engine purposes -->
<title>Contact Property Management</title>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">-->
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<script>
var Maldon = new google.maps.LatLng(51.731897, 0.677035);
function initializeMaldon()
{
var mapProp1 = {
center:Maldon,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp1);
var marker1=new google.maps.Marker({
position:Maldon,
animation:google.maps.Animation.BOUNCE
});
marker1.setMap(map1);
var infowindow1 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow1.open(map1,marker1);
}
google.maps.event.addDomListener(window, 'load', initializeMaldon);
/*The following map wouldnt show properly within hidden Tab so set a timer on it
www.w3schools.com/js/js_timing.asp
www.stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture*/
var refreshIntervalId;
function showMap() {
document.getElementById('googleMap2').style.display = '';
refreshIntervalId = setInterval(function () { updateMapTimer() }, 10);
}
function updateMapTimer() {
clearInterval(refreshIntervalId);
var Norwich = new google.maps.LatLng(52.627970, 1.298478);
var mapProp2 = {
center:Norwich,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map2=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var marker2=new google.maps.Marker({
position:Norwich,
animation:google.maps.Animation.BOUNCE
});
marker2.setMap(map2);
var infowindow2 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow2.open(map2,marker2);
}
</script>
</head>
<body>
<div class="container fill">
<?php include 'header.php';?>
<div class="carousel slide" id="myCarousel">
<div class='LogoOverlay'>
<div class="">
<div class="LogoImage"><img src="images/homepage/OmbudsmanLogo.png" alt="Ombudsman Service Logo"></div>
<div class="LogoImage"><img src="images/homepage/ARMA-logo.jpg" alt="ARMA Logo"></div>
<div class="LogoImage"><img src="images/homepage/FedOfMastBuildLogo.gif" alt="Fed. of Master Builders Logo"></div>
</div>
</div>
<div class="carousel-inner">
<div class="active item">
<div class="fill" style='background-image: url("images/homepage/home2.jpg");'>
<div class="container">
<div class="row nomargin">
<div class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 contFrame">
<div class="row " id="ContactDiv">
<ul class="nav nav-tabs " id="myTab">
<li class="active"><a href="#tab1" data-toggle="tab">Head Office</a></li>
<li><a href="#tab2" onclick="showMap()" data-toggle="tab">Norwich Branch</a></li>
</ul>
<div class="tab-content my-tab">
<div class="tab-pane active" id="tab1">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr />
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b>01621 842711</b></h4>
<hr />
<div class="container">
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<form id="messageMaldon" class="form-horizontal"method="POST" action="send_form_email.php">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control required" name="inputName" id="inputName" placeholder="Name" value="" type="text" title="Please enter your Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control required email" name="inputEmail" id="inputEmail" placeholder="Email" value="" type="text" title="Please enter a valid Email address">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control required number" name="inputPhone" id="inputPhone" placeholder="Phone" value="" type="text" title="Please enter your Phone Number using numbers only">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control required" name="inputMessage" id="inputMessage" placeholder="Message" rows="6"></textarea>
<!--<button class="btn btn-success pull-right" type="submit" value="submit">Send!</button>-->
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" value="Submit" class="btn btn-success pull-right" >Send</button>
</div>
</div>
</form>
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap1"></div>
</div>
</div><!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr>
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b></b></h4>
<hr>
<div class="container">
<a href="#myModal" role="button" class="btn btn-custom " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<!-- <form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Email" type="email">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control" id="inputPhone" placeholder="Phone" type="phone">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" placeholder="Message" rows="6"></textarea>
<button class="btn btn-success pull-right" type="submit">Send!</button>
</div>
</div>
</form>-->
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap2"></div>
</div>
</div><!-- end tab-pane -->
</div><!-- end tab-content -->
</div><!--end ContactDiv-->
</div>
<!--end col-xs-10 col-xs-offset-1-->
</div><!--end row-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php';?>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="includes/js/jquery-2.1.1.min.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-2.1.1.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<!-- jQuery validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('#messageMaldon').validate();
}); // end ready
</script>
</body>
</html>
PHP:
<?php
if(isset($_POST['inputEmail'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "blah@blahblahblah.net";
$email_subject = "Customer Enquiry";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['inputName']) ||
!isset($_POST['inputPhone']) ||
!isset($_POST['inputEmail']) ||
!isset($_POST['inputMessage'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['inputName']; // required
$inputPhone = $_POST['inputPhone']; // required
$inputEmail = $_POST['inputEmail']; // required
$inputMessage = $_POST['inputMessage']; // required
$error_message = "";
$string_exp = "/^[A-Za-z\s.'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
$num_exp = "/^[0-9\s.'-]+$/";
if(!preg_match($num_exp,$inputPhone)) {
$error_message .= 'The Number you entered does not appear to be valid.<br />';
}
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
if(strlen($inputMessage) < 2) {
$error_message .= 'The Message you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Message sent via Contact page on Abbeystone Website.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Phone: ".clean_string($inputPhone)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Message: ".clean_string($inputMessage)."\n";
// create email headers
$headers = 'From: '.$inputEmail."\r\n".
'Reply-To: '.$inputEmail."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
//sleep(3);
echo "<meta http-equiv='refresh' content=\"0; url=http://www.abbeystone.net/contact.php\">";
echo "<script>alert('Thankyou your message was sent successfully.'); </script> ";
}
?>
2 answers
solution1
2 ACCPTED 2015-04-29 18:05:31
It seems to me to be the positioning within the html markup of the #myModal element that is causing safari to render the modal as if it was a child element (as indeed that is how you have positioned it).
From the Bootstrap documentation :
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Also the way in which the modal renders in chrome doesn't seem to be ideal either as it renders under the header and footer elements - rather that being on-top of all page elements (but as it is centred this is less noticeable).
To fix the issue reposition the modal div and its contents from after the trigger button to before the </body> close tag:
Broken Markup (current)
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message
</a>
//reposition as below to fix
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
Fixed Markup
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
</body>
solution2
0 2020-01-19 06:28:46
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap modal contact form submission is not working
Contact Form 7 Not Working Inside Bootstrap Modal
Contact Form 7: Submit button doesn't work in Twitter Bootstrap Modal
Contact form doesn't validate inside bootstrap modal
Bootstrap Contact Form not posting
JQuery Ajax Contact Form Issues
jPlayer + Bootstrap Modal - DOM Issues
Modal Form Validation in Bootstrap
Bootstrap 3 form into modal window
submit form in bootstrap modal
Related Tags