jQuery pop up modal implementation
index.html, pure html file with a button and a div containing a youtube video.
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.videodetective.net/html5/js/ivaplayer-1.1.min.js"></script>
<script type="text/javascript" src="cpmodal.js"></script>
<link rel="stylesheet" type="text/css" href="cpmodal.css">
</head>
<body>
<button id="show-video">Show Video</button>
<div id="my-video">
<iframe width="560" height="315" src="//www.youtube.com/embed/XQf3YP8p85I" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
[/code]
cpmodal.css, css for the modal display. the video is initially set to display none.
[code language=”css”]
.cp-modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background: rgba(0, 0, 0, 0.2);
z-index: 999999;
}
.cp-modal {
display: inline-block;
position: relative;
margin: 0 auto;
background: #fff;
-webkit-box-shadow: 3px 3px 5px 6px rgba(33,33,33,0.2);
-moz-box-shadow: 3px 3px 5px 6px rgba(33,33,33,0.2);
box-shadow: 3px 3px 5px 6px rgba(33,33,33,0.2);
}
#close
{
background: black;
color: #fff;
text-decoration: none;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
right: -9px;
top: -9px;
border-radius: 9px;
cursor:pointer;
}
#close:hover { background: #bd0f37;}
#show-video{cursor:pointer;}
#my-video{display:none;}
[/code]
cpmodal.js, the jQuery code for the modal. It is extending the jQuery core by creating a function called cpModal that will pop up a modal containing the DOM element that is called upon.
[code language=”javascript”]
(function($){
/*$.fn extending the jQuery core.*/
$.fn.cpModal = function(){
var content = this;
$(content).prepend(‘<span id="close">X</span>’);// add close button
var modal = $(content).wrap(‘<div class="cp-modal"></div>’).parent(); //wrap the content with cp-modal div
var overlay = modal.wrap(‘<div class="cp-modal-overlay"></div>’); //wrap cp-modal with cp-modal-overlay div
// center the modal vertically
var marginTop = Math.floor(($(window).height() – $(content).height())/2); //
overlay.css("margin-top",marginTop+’px’);
$(content).css(‘display’,’block’); // display the modal
// close the modal
$(‘#close’).click(function(){
$(content).unwrap();
$(content).unwrap();
$(content).css(‘display’,’none’);
});
return this;
}
})(window.jQuery);
$(document).ready(function(){
$("#show-video").click(function(){
$(‘#my-video’).cpModal(); // call the jQuery extension function for displaying the modal
});
});
[/code]
Search within Codexpedia
Search the entire web