Created
June 12, 2023 16:22
-
-
Save joshespi/c6e5a0d32bb02d66263dbf35561ed093 to your computer and use it in GitHub Desktop.
simple bottom modal for a survey
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php //=============================Survey Modal======================= | |
if(is_null($_COOKIE['pcsd-chocochip'])){ ?> | |
<div id="modalcontrols"> | |
<h2>Bottom Modal</h2> | |
<!-- Trigger/Open The Modal --> | |
<button id="myBtn">Open Modal</button> | |
<!-- The Modal --> | |
<div id="myModal" class="modal"> | |
<!-- Modal content --> | |
<div class="modal-content"> | |
<headerclass="modal-head"> | |
<span class="close">×</span> | |
<h2>Online Survey – Got a Few Minutes?</h2> | |
</header><!--modal-head end --> | |
<article> | |
<img src="http://provo.edu/wp-content/uploads/2016/09/survey.jpg" alt="" /> | |
<p>Hi, we’re working on a new website and we really need your help. If you could take 3 - 5 minutes to give us your opinion we’d be very grateful. Are you ready?</p> | |
</article> | |
<aside> | |
<ul><!--chocochip cookie is hides modal forever, vanilla only hides for 12 hours --> | |
<li><a onClick="SetCookie('pcsd-chocochip','anycontent', 90);javascript:location.href='https://www.surveymonkey.com/r/PCSDwebsite';" href="https://www.surveymonkey.com/r/PCSDwebsite">Okay! Start the survey now.</a></li> | |
<li><a class="closelink" href="#" onClick="SetCookie('pcsd-chocochip','anycontent', 1);return false;">Yes, but I don’t have time right now.</a></li> | |
<li><a class="closelink" href="#" onClick="SetCookie('pcsd-chocochip','anycontent', 90);return false;">No thanks. (Don’t ask me again)</a></li> | |
</ul> | |
</aside> | |
<footer class="modal-foot"> | |
</footer> | |
</div> | |
</div><!-- end id="modalcontrols"--> | |
<script> | |
// Get the modal | |
var modal = document.getElementById('myModal'); | |
// Get the button that opens the modal | |
var btn = document.getElementById("myBtn"); | |
// Get the <span> element that closes the modal | |
var span = document.getElementsByClassName("close")[0]; | |
var li = document.getElementsByClassName("closelink")[0]; | |
//makes the pop up appear after time specified in mil seconds | |
setTimeout(function(){ document.getElementById('myModal').style.display='block'; }, 5000); | |
// When the user clicks the button, open the modal | |
btn.onclick = function() { | |
modal.style.display = "block"; | |
} | |
// When the user clicks on <span> (x), close the modal | |
span.onclick = function() { | |
modal.style.display = "none"; | |
} | |
// When the user clicks anywhere outside of the modal, close it | |
window.onclick = function(event) { | |
if (event.target == modal) { | |
modal.style.display = "none"; | |
} | |
} | |
//cookie set function | |
function SetCookie(c_name,value,expiredays) | |
{ | |
var exdate=new Date() | |
exdate.setDate(exdate.getDate()+expiredays) | |
document.cookie=c_name+ "=" +escape(value)+ | |
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) | |
location.reload() | |
} | |
</script><?php | |
}else {} ?> | |
</div> | |
<style> | |
/* -----------------------Modal Content--------------------------- */ | |
.modal-content { | |
position: fixed; | |
bottom: 0; | |
background-color: #fff; | |
max-width: 640px; | |
right: 0; | |
left: 0; | |
margin: 0 auto; | |
text-align: center; | |
-webkit-animation-name: slideIn; | |
-webkit-animation-duration: 1s; | |
animation-name: slideIn; | |
animation-duration: 1s | |
} | |
.close { | |
color: #000; | |
float: right; | |
font-size: 28px; | |
font-weight: bold; | |
margin-right: 15px; | |
} | |
.close:hover, | |
.close:focus { | |
color: #ccc; | |
text-decoration: none; | |
cursor: pointer; | |
} | |
.modal-head { | |
padding: 0px 50px 0px 50px; | |
background-color: #fff; | |
height: 100px; | |
} | |
.modal-content article {padding: 0px 70px 0px 70px;border: none;} | |
.modal-content article p {text-align: left;} | |
.modal-content article img {float: left;margin-right: 30px;} | |
.modal-content aside {padding: 0px 70px 0px 70px;} | |
.modal-content aside ul {margin: 60px auto;padding: 0;} | |
.modal-content aside ul li {list-style: none;font-size: 14px;} | |
.modal-foot { | |
height: 100px; | |
background-color: #103759; | |
color: #fff; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment