jQuery pop up modal implementation

index.html, pure html file with a button and a div containing a youtube video.

<!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>

cpmodal.css, css for the modal display. the video is initially set to display none.

.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;}

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.

(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
    });
});

demo

Search within Codexpedia

Custom Search

Search the entire web

Custom Search