1// modal.3.0.js Plugin by Tia Aoake ----------------------------------- // 2/* 3 // 1.0 Simple Responsive Modal Popup 4 // 2.0 Ajax Load HTML 5 // 3.0 Image/Video Gallery 6 // 3.1 Hash location trigger, custom modals, use .close-modal for custom close buttons 7 8 1. Include this in your CSS 9 10 /* ============================================================================ 11 "The Modal" Plugin CSS - modal.js by Tia Aoake 12 ========================================================================== */ 13 14 /* Modal Custom Styling 15 .m-modal-is-open { overflow:hidden !important; } 16 #modal { position:fixed; width:100%; height:100%; top:0px; left:0px; overflow: hidden; z-index: 9999999999999999999; } 17 #modal .pageContent #modal { position:relative; height:auto; z-index:1; left:auto; top:auto; overflow:auto; } 18 #modal .m-close { position: fixed; top: 0; right: 0; background: rgba(0, 0, 0, 0.4); display:block; width: 46px; height: 48px; text-align:center; line-height:34px; color: #FFF; z-index: 999; text-decoration: none; opacity: 1;} 19 #modal .m-close:hover, #modal .m-close:focus { text-decoration:none; outline:none; background: rgb(235, 48, 64);} 20 #modal .m-close:before, #modal .m-close:after { content:""; display: inline-block; width: 2px; height: 50%; background: rgba(255, 255, 255, 1); position:absolute; top: 25%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} 21 #modal .m-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 22 #modal .m-close-overlay { position:fixed; background:none; width:100%; height:100%; left:0px; top:0px; z-index:-1; display: none;} 23 #modal .m-modal-item .m-close { display:block; right: -46px;} 24 #modal.keyboard-open { height:300%; } 25 #modal .m-modal-bkgd { background: rgba(31, 29, 29, 0.81); width:100%; height:100%; position: absolute; top: 0; left: 0; z-index: 1;} 26 #modal .m-modal-content { margin: 0; width: 100%; height: 100%; position: relative; z-index: 2; overflow: scroll;} 27 #modal .m-modal-block{ position: relative;height: inherit;width: inherit;} 28 29 #modal .m-modal-item { width: 100%; max-width: 800px; margin: 0 auto; position: relative; top: 50%;-webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%);} 30 #modal .m-modal-item .ninja-forms-success-msg { display:none; } 31 32 #modal .m-modal-item iframe[src*="youtube"] {} 33 #modal .m-modal-item iframe[src*="wistia"] {} 34 #modal .m-modal-item iframe[src*="vimeo"] {} 35 36 @media screen and (max-width: 1024px){ 37 38 #modal .m-modal-item { max-width:600px; } 39 #modal .m-modal-item iframe { width:600px; height:337px; } 40 41 } 42 @media screen and (max-width:800px){ 43 44 #modal .m-modal-item { max-width:500px; } 45 #modal .m-modal-item iframe { width:500px; height:281px; } 46 47 } 48 @media screen and (max-width:600px){ 49 50 #modal .m-modal-item { max-width:350px; } 51 #modal .m-modal-item iframe { width:350px; height:197px; } 52 53 #modal .m-close { display:block; } 54 #modal .m-modal-item .m-close { display:none; } 55 56 } 57 58 2. Implementation 59 60 Default: <a href="#" data-modal="example">Default Modal</a> 61 62 Video (YouTube): <a href="#" data-modal_video="youtube:06D-A6CL3Pv8">Video Modal (YouTube)</a> 63 Video (Vimeo): <a href="#" data-modal_video="vimeo:107316474">Video Modal (Vimeo)</a> 64 Video (Wistia): <a href="#" data-modal_video="wistia:wv95edfsya">Wistia Modal (Wistia)</a> 65 66 Image: <a href="" data-modal_image="">Click to see a bigger image.</a> 67 68 Gallery: 69 70 <div data-modal_gallery="unique_ID"> 71 <a href="" data-modal_image="">Gallery Image 1</a> 72 <a href="" data-modal_image="">Gallery Image 2</a> 73 <a href="" data-modal_video="youtube:08872323">Gallery Video 1</a> 74 </div> 75 76*/ 77jQuery(document).ready(function($) {// Document Ready 78
79 //////////////////////////////////////////////////////////////////// Setup 80 81 //setup cotnainer 82 var modalContainer = $('body'); 83 84 //close button HTML 85 var closeHTML = '<a class="m-close" href="#"></a>'; 86 var controlsHTML = '<a class="m-control-prev" href="#"></a><a class="m-control-next" href="#"></a>'; 87 88 //test if we are using cusotm HTML 89 if( $('#modal').length !== 1 ){ 90 91 //add to body 92 var mHTML = ''; 93 mHTML += '<div id="modal" style="display:none;">'; 94 mHTML += '<div class="m-modal-bkgd"></div>'; 95 mHTML += '<div class="m-modal-content">'; 96 mHTML += '<div class="m-modal-block">'; 97 mHTML += '<a class="m-close" href="#"></a>'; 98 mHTML += '<a class="m-close-overlay" href="#"> </a>'; 99 mHTML += '<div class="m-modal-item" data-modal_id="example"></div>'; 100 mHTML += '<div class="m-modal-item empty-me" data-modal_id="video"></div>'; 101 mHTML += '<div class="m-modal-item empty-me" data-modal_id="image"></div>'; 102 mHTML += '</div><!-- .m-modal-tile -->'; 103 mHTML += '</div><!-- .m-modal-content -->'; 104 mHTML += '</div><!-- #modal --> '; 105 106 modalContainer.append(mHTML); //setup 107 108 }//custom 109 110 //////////////////////////////////////////////////////////////////// Defaults 111 112 // Open 113 $('[data-modal]').click(function(event){ 114
115 //Must Use attr:data-href to avoid trouble with Firefox 116 event.preventDefault(); 117 118 if( !modalContainer.hasClass('m-modal-is-open') ){ 119 120 //Get ID 121 var id = $(this).attr('data-modal'); 122 openModal(id); 123 124 } 125 126 }); 127 128 //Setup gallery items 129 $('[data-modal_gallery]').each(function(){ 130 131 var i = 0; 132 133 //loop through each 134 $(this).find('[data-modal_image], [data-modal_video]').each(function(){ 135 136 i++; //found 137 $(this).attr('data-modal_gallery_index', i );//index 138 139 }); 140 141 }); 142 143 //openModal() 144 function openModal(id){ 145 146 //if id doesn't exsist create it 147 if( $('[data-modal_id="'+id+'"]').length <= 0 ){ 148 149 $('#modal .m-modal-block').append('<div class="m-modal-item" data-modal_id="'+id+'"></div>'); 150 151 } 152 153 //Add body class 154 modalContainer.addClass('m-modal-is-open seen-modal'); 155 156 //open modal 157 $('#modal [data-modal_id="'+id+'"]').show().addClass('selected'); 158 159 initButtons(); //initialize buttons 160 161 // Show Modal 162 $('#modal').fadeIn(400, function(){ $('#modal').addClass('open') }); 163 164 } 165 166 //closeModal() 167 function closeModal(){ 168 169 $('#modal').fadeOut(400, function(){ 170 171 $(this).removeClass('open'); 172 $('active-modal').removeClass('active-modal'); 173 174 }); 175 176 //Close current modal 177 $('#modal [data-modal_id].selected').fadeOut(400, function() { 178 179 // Empty html using .empty-me class 180 $('#modal [data-modal_id].empty-me.selected').html(""); 181 182 //remove classes 183 modalContainer.removeClass('m-modal-is-open'); 184 $(this).removeClass('selected'); 185 186 }); 187 188 }//closeModal 189 190 //Next 191 function nextGalleryItem(direction){ 192 193 //next or prev? 194 direction = typeof direction !== 'undefined' ? direction : 'next'; 195 196 var gallerySelector = '[data-modal_gallery="'+$('[data-modal_id].selected').attr('data-gallery_id')+'"]'; 197 198 var gallery = $('[data-var_modal_gallery].selected').attr('data-var_modal_gallery'); 199 var index = parseInt( $('[data-var_modal_gallery_index].selected').attr('data-var_modal_gallery_index') ); 200 var items = $('[data-modal_gallery="'+gallery+'"] [data-modal_gallery_index]').length; 201 202 var nextIndex = direction == 'next' ? index+1 : index-1 ; 203 nextIndex = index == 1 && direction != 'next' ? items : nextIndex ; //got to last item 204 nextIndex = index == items && direction == 'next' ? 1 : nextIndex ; //show first item 205 206 var selector = '[data-modal_gallery="'+gallery+'"] [data-modal_gallery_index="'+nextIndex+'"]'; 207 208 if( $(selector).length > 0 ){ 209 210 //Close current modal 211 $('#modal [data-modal_id].selected').fadeOut(100, function() { 212 213 //Empty html using .empty-me class 214 $('#modal [data-modal_id].empty-me.selected').html("").removeClass('selected'); 215 216 $(selector).click(); //click to open 217 218 }); 219 220 } 221 else{ console.log('Selector not found: '+selector); } 222 223 } 224 225 function initButtons(){ 226 227 console.log('init.buttons'); 228 229 //Close 230 $('#modal .m-close-overlay, #modal .m-close, #modal .close-modal').click(function(event){ event.preventDefault(); closeModal(); }); 231 232 //next/prev 233 $('#modal .m-control-next, #modal .m-control-prev').click(function(event){ 234 235 event.preventDefault(); 236 var direction = $(this).hasClass('m-control-prev') ? 'prev' : 'next' ; 237 nextGalleryItem(direction); 238 239 }); 240 241 $(document).keydown(function(event){ if (event.keyCode == 27) { event.preventDefault(); closeModal(); } }); 242 243 } initButtons(); //initialize buttons 244 245 //Ipad Keyboard Issue Overide 246 $('#modal input, #modal textarea, #modal select').focus(function(){ $('#modal').addClass('keyboard-open'); }); 247 $('#modal input, #modal textarea, #modal select').focusout(function(){ $('#modal').removeClass('keyboard-open'); }); 248 249 //See if success modal should show 250 var href = $(location).attr('href'); 251 if( href.toLowerCase().indexOf("#modal=") >= 0 ){ 252 253 id = href.replace('#modal=',''); 254 openModal(id); 255 256 } 257
258 //////////////////////////////////////////////////////////////////// Image 259 260 $('[data-modal_image]').click(function(event){ 261 262 event.preventDefault(); 263 var modal = 'image'; 264 265 var imageUrl = $(this).attr('data-modal_image'); 266 var text = $(this).attr('title');//caption 267 var desc = ""; 268 269 if( text !== '' && text !== undefined ){ var desc = '<p>'+text+'</p>'; } 270 271 var options = closeHTML; 272 273 //check for gallery 274 var galleryIndex = $(this).attr('data-modal_gallery_index'); 275 if( typeof galleryIndex !== typeof undefined && galleryIndex !== false ){ 276 277 //add prev/next to options 278 options += controlsHTML; 279 $('[data-modal_id="'+modal+'"]').attr('data-var_modal_gallery_index', galleryIndex ); 280 281 //add gallery ID too 282 var galleryID = $(this).closest('[data-modal_gallery]').attr('data-modal_gallery'); 283 $('[data-modal_id="'+modal+'"]').attr('data-var_modal_gallery', galleryID ); 284 285 } 286 287 var HTML = '<div class="image-wrapper"><img src="'+imageUrl+'" alt="'+text+'"/>'+desc+options+'</div>'; 288 289 //Insert HTML + display 290 $('[data-modal_id="'+modal+'"]').html(HTML); 291 $(this).addClass('active-modal'); 292 293 openModal(modal); 294 295 }); 296 297 //////////////////////////////////////////////////////////////////// VIDEO 298 299 $('[data-modal_video]').click(function(event){ 300 301 event.preventDefault(); 302 var modal = "video"; 303 304 //Get options array [ type : id ] 305 var videoOptions = $(this).attr('data-modal_video'); 306 videoOptions = videoOptions.replace(' ','').split(':'); 307 //console.log(videoOptions); 308 309 //Store options 310 var videoType = videoOptions[0].toLowerCase(); 311 var videoID = videoOptions[1]; 312 313 var HTML = ""; 314 315 //Check type exsists 316 if( videoType != "" ){ 317 318 switch(videoType){ 319 320 /* Youtube */ 321 case 'youtube': 322 HTML = '<iframe id="ytplayer" width="800" height="450" src="http://www.youtube.com/embed/'+videoID+'?autoplay=1&wmode=opaque" frameborder="0" allowfullscreen="allowfullscreen"/>'; break; 323 324 /* Vimeo */ 325 case 'vimeo': 326 // OLD //HTML = '<iframe class="video-player vimeo" src="//player.vimeo.com/video/'+videoID+'" autoplay="1" badge="0" portrait="0" title="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; break; 327 HTML = '<iframe src="//player.vimeo.com/video/'+videoID+'?title=0&byline=0&portrait=0&autoplay=1" width="800" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; break; 328 329 /* Wistia */ 330 case 'wistia': 331 HTML = '<div class="wisita-video" style="display:inline-block;">'; 332 HTML += '<iframe src="//fast.wistia.net/embed/iframe/'+videoID+'?videoFoam=true&autoPlay=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="800" height="450"></iframe>'; 333 HTML +='</div>'; 334 335 /* Fallback */ 336 default: console.log('cl. [data-modal_video] / videoType does not exsist.' ); 337 338 } 339 340 } else{ console.log('cl. [data-modal_video] / videoType = '+videoType); } 341 342 var options = closeHTML; 343 344 //check for gallery 345 var galleryIndex = $(this).attr('data-modal_gallery_index'); 346 if( typeof galleryIndex !== typeof undefined && galleryIndex !== false ){ 347 348 //add prev/next to options 349 options += controlsHTML; 350 $('[data-modal_id="'+modal+'"]').attr('data-var_modal_gallery_index', galleryIndex ); 351 352 //add gallery ID too 353 var galleryID = $(this).closest('[data-modal_gallery]').attr('data-modal_gallery'); 354 $('[data-modal_id="'+modal+'"]').attr('data-var_modal_gallery', galleryID ); 355 356 } 357 358 HTML = '<div class="embed-wrapper controls-wrapper">
358'+HTML+options+'</div>' 359 360 //Insert HTML + display 361 $('[data-modal_id="'+modal+'"]').html(HTML); 362 $(this).addClass('active-modal'); 363 364 openModal(modal); 365 366 }); 367 368 //////////////////////////////////////////////////////////////////// TRIGGER 369 370 //using the data-trigger attribute to assign a modal a has location trigger 371 var hash = window.location.hash.replace("#", ""); 372 if( hash !== '' ){ 373 374 //<div class="m-modal-item" data-modal_id="landing" data-trigger="landing"> 375 var selector = '.m-modal-item[data-trigger="'+hash+'"]'; 376 console.log(selector); 377 378 if( $(selector).length > 0 ){ 379 380 var id = $(selector).attr('data-modal_id'); 381 openModal(id); 382 383 } 384 385 } 386 387 388});// ^Document Ready
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.