Created
October 23, 2013 20:15
-
-
Save rodica-andronache/7125902 to your computer and use it in GitHub Desktop.
Create a popup window that shows a form
This file contains hidden or 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
| http://buckwilson.me/lightboxme/ | |
| jquery.lightbox_me.js: | |
| /* | |
| * $ lightbox_me | |
| * By: Buck Wilson | |
| * Version : 2.3 | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | |
| * limitations under the License. | |
| */ | |
| (function($) { | |
| $.fn.lightbox_me = function(options) { | |
| return this.each(function() { | |
| var | |
| opts = $.extend({}, $.fn.lightbox_me.defaults, options), | |
| $overlay = $(), | |
| $self = $(this), | |
| $iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'), | |
| ie6 = ($.browser.msie && $.browser.version < 7); | |
| if (opts.showOverlay) { | |
| //check if there's an existing overlay, if so, make subequent ones clear | |
| var $currentOverlays = $(".js_lb_overlay:visible"); | |
| if ($currentOverlays.length > 0){ | |
| $overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>'); | |
| } else { | |
| $overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>'); | |
| } | |
| } | |
| /*---------------------------------------------------- | |
| DOM Building | |
| ---------------------------------------------------- */ | |
| if (ie6) { | |
| var src = /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'; | |
| $iframe.attr('src', src); | |
| $('body').append($iframe); | |
| } // iframe shim for ie6, to hide select elements | |
| $('body').append($self.hide()).append($overlay); | |
| /*---------------------------------------------------- | |
| Overlay CSS stuffs | |
| ---------------------------------------------------- */ | |
| // set css of the overlay | |
| if (opts.showOverlay) { | |
| setOverlayHeight(); // pulled this into a function because it is called on window resize. | |
| $overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' }); | |
| if (!$overlay.hasClass('lb_overlay_clear')){ | |
| $overlay.css(opts.overlayCSS); | |
| } | |
| } | |
| /*---------------------------------------------------- | |
| Animate it in. | |
| ---------------------------------------------------- */ | |
| // | |
| if (opts.showOverlay) { | |
| $overlay.fadeIn(opts.overlaySpeed, function() { | |
| setSelfPosition(); | |
| $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad()}); | |
| }); | |
| } else { | |
| setSelfPosition(); | |
| $self[opts.appearEffect](opts.lightboxSpeed, function() { opts.onLoad()}); | |
| } | |
| /*---------------------------------------------------- | |
| Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox) | |
| ---------------------------------------------------- */ | |
| if (opts.parentLightbox) { | |
| opts.parentLightbox.fadeOut(200); | |
| } | |
| /*---------------------------------------------------- | |
| Bind Events | |
| ---------------------------------------------------- */ | |
| $(window).resize(setOverlayHeight) | |
| .resize(setSelfPosition) | |
| .scroll(setSelfPosition); | |
| $(window).bind('keyup.lightbox_me', observeKeyPress); | |
| if (opts.closeClick) { | |
| $overlay.click(function(e) { closeLightbox(); e.preventDefault; }); | |
| } | |
| $self.delegate(opts.closeSelector, "click", function(e) { | |
| closeLightbox(); e.preventDefault(); | |
| }); | |
| $self.bind('close', closeLightbox); | |
| $self.bind('reposition', setSelfPosition); | |
| /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ | |
| /*---------------------------------------------------- | |
| Private Functions | |
| ---------------------------------------------------- */ | |
| /* Remove or hide all elements */ | |
| function closeLightbox() { | |
| var s = $self[0].style; | |
| if (opts.destroyOnClose) { | |
| $self.add($overlay).remove(); | |
| } else { | |
| $self.add($overlay).hide(); | |
| } | |
| //show the hidden parent lightbox | |
| if (opts.parentLightbox) { | |
| opts.parentLightbox.fadeIn(200); | |
| } | |
| $iframe.remove(); | |
| // clean up events. | |
| $self.undelegate(opts.closeSelector, "click"); | |
| $(window).unbind('reposition', setOverlayHeight); | |
| $(window).unbind('reposition', setSelfPosition); | |
| $(window).unbind('scroll', setSelfPosition); | |
| $(window).unbind('keyup.lightbox_me'); | |
| if (ie6) | |
| s.removeExpression('top'); | |
| opts.onClose(); | |
| } | |
| /* Function to bind to the window to observe the escape/enter key press */ | |
| function observeKeyPress(e) { | |
| if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) closeLightbox(); | |
| } | |
| /* Set the height of the overlay | |
| : if the document height is taller than the window, then set the overlay height to the document height. | |
| : otherwise, just set overlay height: 100% | |
| */ | |
| function setOverlayHeight() { | |
| if ($(window).height() < $(document).height()) { | |
| $overlay.css({height: $(document).height() + 'px'}); | |
| $iframe.css({height: $(document).height() + 'px'}); | |
| } else { | |
| $overlay.css({height: '100%'}); | |
| if (ie6) { | |
| $('html,body').css('height','100%'); | |
| $iframe.css('height', '100%'); | |
| } // ie6 hack for height: 100%; TODO: handle this in IE7 | |
| } | |
| } | |
| /* Set the position of the modal'd window ($self) | |
| : if $self is taller than the window, then make it absolutely positioned | |
| : otherwise fixed | |
| */ | |
| function setSelfPosition() { | |
| var s = $self[0].style; | |
| // reset CSS so width is re-calculated for margin-left CSS | |
| $self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 3) }); | |
| /* we have to get a little fancy when dealing with height, because lightbox_me | |
| is just so fancy. | |
| */ | |
| // if the height of $self is bigger than the window and self isn't already position absolute | |
| if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute' || ie6)) { | |
| // we are going to make it positioned where the user can see it, but they can still scroll | |
| // so the top offset is based on the user's scroll position. | |
| var topOffset = $(document).scrollTop() + 40; | |
| $self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0}) | |
| if (ie6) { | |
| s.removeExpression('top'); | |
| } | |
| } else if ($self.height()+ 80 < $(window).height()) { | |
| //if the height is less than the window height, then we're gonna make this thing position: fixed. | |
| // in ie6 we're gonna fake it. | |
| if (ie6) { | |
| s.position = 'absolute'; | |
| if (opts.centered) { | |
| s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"') | |
| s.marginTop = 0; | |
| } else { | |
| var top = (opts.modalCSS && opts.modalCSS.top) ? parseInt(opts.modalCSS.top) : 0; | |
| s.setExpression('top', '((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"') | |
| } | |
| } else { | |
| if (opts.centered) { | |
| $self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1}) | |
| } else { | |
| $self.css({ position: 'fixed'}).css(opts.modalCSS); | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }; | |
| $.fn.lightbox_me.defaults = { | |
| // animation | |
| appearEffect: "fadeIn", | |
| appearEase: "", | |
| overlaySpeed: 250, | |
| lightboxSpeed: 300, | |
| // close | |
| closeSelector: ".close", | |
| closeClick: true, | |
| closeEsc: true, | |
| // behavior | |
| destroyOnClose: false, | |
| showOverlay: true, | |
| parentLightbox: false, | |
| // callbacks | |
| onLoad: function() {}, | |
| onClose: function() {}, | |
| // style | |
| classPrefix: 'lb', | |
| zIndex: 999, | |
| centered: false, | |
| modalCSS: {top: '40px'}, | |
| overlayCSS: {background: 'black', opacity: .3} | |
| } | |
| })(jQuery); | |
| $('#try-1').click(function(e) { | |
| $('#sign_up').lightbox_me({ | |
| centered: true, | |
| onLoad: function() { | |
| $('#sign_up').find('input:first').focus() | |
| } | |
| }); | |
| e.preventDefault(); | |
| }); | |
| <a href="#" id="contact-her" class="buttonB"><?php _e('CONTACT RHONDA','codeinwp_theme'); ?></a> | |
| <div id="sign_up" style="background-color:red;display:none;"> | |
| <div class="contact-us "> | |
| <div class="contact-cont"> | |
| <h2> | |
| <span><?php _e('Contact for free','codeinwp_theme'); ?></span> | |
| <?php _e('An Experienced Attorney','codeinwp_theme'); ?> | |
| </h2> | |
| <div class="contact-form"> | |
| <div class="required"><?php _e('* Required Fields','codeinwp_theme'); ?></div> | |
| <form action="http://www.cw-apps.com/form-processor-noscript.php" method="POST"> | |
| <div class="txtinput"> | |
| <input type="text" onfocus="if(this.value == 'Full Name*') { this.value = ''; }" onblur="if(this.value == '') this.value = 'Full Name*'" value="Full Name*"> | |
| </div> | |
| <div class="txtinput"> | |
| <input type="text" onfocus="if(this.value == 'Phone/E-mail*') { this.value = ''; }" onblur="if(this.value == '') this.value = 'Phone/E-mail*'" value="Phone/E-mail*"> | |
| </div> | |
| <div class="txtarea"> | |
| <textarea type="text" onfocus="if(this.value == 'Tell Us About Your Case') { this.value = ''; }" onblur="if(this.value == '') this.value = 'Tell Us About Your Case'"><?php _e('Tell Us About Your Case','codeinwp_theme'); ?></textarea> | |
| </div> | |
| <div class="contact-btn"> | |
| <input type="submit" value="send"> | |
| <a href="#"><?php _e('SEND FOR A ','codeinwp_theme'); ?><span><?php _e('FREE CONSULTATION','codeinwp_theme'); ?></span></a> </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment