Something fun I decided to make. Do you think I'm Cool? lol I hope you enjoy this pen.
Forked from Chyno Deluxe's Pen Do you...?.
A Pen by Dalton Kiner on CodePen.
Something fun I decided to make. Do you think I'm Cool? lol I hope you enjoy this pen.
Forked from Chyno Deluxe's Pen Do you...?.
A Pen by Dalton Kiner on CodePen.
<!--PEN CODE--> | |
<button id="clickme" class="center">Click Me</button> | |
<div id="modal" class="modal-bg"> | |
<div class="modal-container"> | |
<div class="box modal-box text-center"> | |
<button id="close" class="close-btn"><i class="fa fa-fw fa-close"></i></button> | |
<h1>Do you think I'm Cool?</h1> | |
<p>Don't worry. I won't be upset if you select "Not Really".</p> | |
<div class="center"> | |
<button id="lol">Not Really</button> | |
<button id="yes">Absolutely!</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!--END PEN CODE--> |
(function() { | |
var clickMe = $("#clickme"), | |
modal = $("#modal.modal-bg"), | |
modal_cont = $("#modal .modal-container"), | |
modalBox = $("#modal .modal-box"), | |
closeBtn = $("#close"), | |
lolBtn = $("#lol"), | |
yesBtn = $("#yes"), | |
count = 0; | |
function randNum(num) { | |
return Math.floor(Math.random() * num); | |
} | |
function resetLolBtn() { | |
$(this).css({ | |
position: "static" | |
}); | |
} | |
clickMe.on("click", function() { | |
console.log("click"); | |
modal.fadeIn(250); | |
lolBtn.css({ | |
position: "static" | |
}); | |
}); | |
closeBtn.on("click", function() { | |
modal.fadeOut(100); | |
}); | |
lolBtn.on("mouseover", function() { | |
console.log("whoops"); | |
count += 1; | |
console.log(count); | |
if (count === 100) { | |
var userQuit = confirm("You're still here? Are you sure you don't just want to quit? Click OK to quit or Cancel to keep trying."); | |
if (userQuit === true) { | |
modal.fadeOut(150); | |
alert("I knew you'd give up eventually. I hope you enjoyed this pen."); | |
} else { | |
count += 1; | |
} | |
} | |
if (count === 20) { | |
alert("Ok, Really. Just give up already"); | |
} else if (count === 10) { | |
var userQuit = confirm("Give up yet? Click OK to quit or Cancel to keep trying"); | |
if (userQuit === true) { | |
modal.fadeOut(150); | |
alert("I knew you'd give up eventually. I hope you enjoyed this pen."); | |
} else { | |
count += 1; | |
} | |
} | |
resetLolBtn(); | |
$(this).css({ | |
position: "absolute", | |
top: randNum(90) + "%", | |
left: randNum(90) + "%" | |
}); | |
}); | |
lolBtn.on("click", function() { | |
alert("Either there was a glitch in the matix or you are one sly devil. I hope you enjoyed this pen. =)"); | |
modal.fadeOut(150); | |
}); | |
yesBtn.on("click", function() { | |
alert("Yeah...I knew you thought I was cool. I hope you enjoyed the pen."); | |
modal.fadeOut(150); | |
}); | |
}()) |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
.center { | |
margin: auto; | |
} | |
#clickme { | |
@extend %border_radius; | |
display: block; | |
margin: 10% auto; | |
background: $color_dlx_accent; | |
color: $color_base_white; | |
border-color: transparent; | |
font-size: 1.2em; | |
&:hover { | |
background: $color_dlx_light; | |
} | |
} | |
.modal-bg { | |
display: none; | |
background: rgba(0, 0, 0, 0.7); | |
z-index: 3; | |
/*position*/ | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
.modal-container { | |
height: 100%; | |
margin: auto; | |
/*position*/ | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
} | |
#close { | |
display: block; | |
padding: 0; | |
margin-top: -10px; | |
margin-right: -10px; | |
float: right; | |
&.close-btn { | |
color: $color_base_charGrey; | |
&:hover { | |
color: $color_base_white; | |
background: $color_base_error; | |
border-color: transparent; | |
} | |
} | |
} | |
.modal-box { | |
@extend %border_radius; | |
@include transition; | |
padding: 20px; | |
margin-top: 10%; | |
z-index: 999; | |
h1 { | |
margin: 0; | |
clear: both; | |
} | |
.center { | |
width: 240px; | |
text-align: right; | |
margin: auto; | |
} | |
button { | |
@extend %border_radius; | |
font-size: 1em; | |
margin-right: 10px; | |
&:last-child { | |
margin: 0; | |
background: $color_base_success; | |
color: $color_base_white; | |
border-color: transparent; | |
} | |
&#lol { | |
z-index: 999; | |
background: $color_base_error; | |
color: $color_base_white; | |
border-color: transparent; | |
} | |
} | |
} | |
} |
<link href="http://codepen.io/ChynoDeluxe/pen/eJPeEL" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |