Popover - colorbox or lightbox style? (dim background)

Is there a way to have the background behind the pop up dim the same way a lightbox or colorbox popup works?

  • RodeoRamsey
    • Site Builder, Child of Zeus

    I tried adding a div above the "messagebox" div and adding some overlays to the styles and it worked great, except, when you click the X to close the messagebox/popup, the overlay stays there. How do I tie the closing action to disable that?

  • RodeoRamsey
    • Site Builder, Child of Zeus

    Got it worked out.

    Here is my new function in the JS:

    function removeMessageBox() {
    	jQuery(this).parent('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
    	jQuery('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox');
    	return false;
    }

    And my edit to the HTML:

    <div id="popupOverlay" class="visiblebox"></div>
    			<div id="messagebox" class="visiblebox" style="<?php echo $style; ?>">
    				<a href="" id="closebox" title="Close this box"></a>
    				<div id="message" style="<?php echo $box; ?>">
    					<?php echo $content; ?>
    					<div class="clear"></div>
    					<div class="claimbutton hide"><a href="#" id="clearforever"><?php _e('Never see this message again.','popover'); ?></a></div>
    				</div>
    				<div class="clear"></div>
    			</div>

    And my CSS:

    #popupOverlay {
        background-color: #362314 !important;
        background-image: none;
    	opacity:0.9;
        filter:alpha(opacity=90);
        -moz-opacity:0.9;
        height: 100%;
        position: fixed;
        width: 100%;
        left: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        z-index: 999;
    }
    div#popupOverlay.visiblebox {
    	display: block;
    }
    div#popupOverlay.hiddenbox {
    	display: none;
    }

    Hope that helps someone else! And if anyone sees anything that needs fixed, just let me know!

  • unofficially
    • Flash Drive

    Nice one RodeoRamsey :smiley: this should be part of the plugin by default (devs?) - need to make the popover the focus and its hard sometimes if you have a busy site.

    Just one question - currently your hack only 'dims' the current screen area and not the whole page (so if you scroll down you see the background again) - is there a way round this, or is it just happening with my theme?

    Ta
    Tony

  • Jason
    • The Bug Hunter

    This is exactly what I needed. I am not a pro with editing those files but wonders if @unofficially that you would not mind reposting the wonderful work that @RodeoRamsey did but with the updated fixes.

    I guess I can follow what was said but afraid to make a mistake.

    If not, thanks still guys.

    Jason

  • unofficially
    • Flash Drive

    Sorry for the delay @infotechd - if you haven't sorted it, here you go:

    Look for and replace the following in:

    /wp-content/plugins/popover/popoverincludes/js/popover.js

    function removeMessageBoxForever() {
    	jQuery(this).parents('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
    	jQuery('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox')
    	createCookie('popover_never_view', 'hidealways', 365);
    	return false;
    }
    function removeMessageBox() {
    	jQuery(this).parent('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
    	jQuery('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox');
    	return false;
    }

    /wp-content/plugins/popover/popoverincludes/classes/popoverpublic.php

    <div id="popupOverlay" class="visiblebox"></div>
    			<div id="messagebox" class="visiblebox" style="<?php echo $style; ?>">
    				<a href="" id="closebox" title="Close this box"></a>
    				<div id="message" style="<?php echo $box; ?>">
    					<?php echo $content; ?>
    					<div class="clear"></div>
    					<div class="claimbutton hide"><a href="#" id="clearforever"><?php _e('Never see this message again.','popover'); ?></a></div>
    				</div>
    				<div class="clear"></div>
    			</div>

    /wp-content/plugins/popover/popoverincludes/css/popover.css

    #popupOverlay {
        background-color: #362314 !important;
        background-image: none;
    	opacity:0.9;
        filter:alpha(opacity=90);
        -moz-opacity:0.9;
        height: 100%;
        position: fixed;
        width: 100%;
        left: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        top: 0;
        z-index: 999;
    }
    div#popupOverlay.visiblebox {
    	display: block;
    }
    div#popupOverlay.hiddenbox {
    	display: none;
    }

    Let us know how you got on :slight_smile:

  • daniel.martin.alonso
    • The Incredible Code Injector

    I found a problem with the code. If you check the "override the above with JS" to center the pop-up automatically, then you have a pop with the correct height, but 0 width. That is, you have a beautiful white vertical line with an X in the top.

    Take a look at the screenshot.

    Any idea?

  • Barry
    • DEV MAN’s Mascot

    I have the with and height set. It works in every browser, but Internet Explorer 8. It's something related to the code added by the lightbox effect, not the plugin itself.

    Sorry, must have mis-read, thought you'd said you had the width set to 0 :disappointed:

    Not used IE8 for a bit, is there any form of debug, element inspection system on that to see what styles is being applied to the popover? Might help narrow this down - but will see if I can spot anything in the code listed above.

  • daniel.martin.alonso
    • The Incredible Code Injector

    Hi,

    I've updated the plugin and the solution for a lightbox effect hasn't been incorporated to this version. Why? Isn't it worth?

    Anyway, I've tried to apply the above code changes to the new version of the plugin, and it's not working. What has changed? Something in the jQuery libraries?

    Can you try it to see if it works for you?

    Thanks.

  • Barry
    • DEV MAN’s Mascot

    Hi daniel

    I added in a system to allow different styles of popover to be added to the plugin (either by adding them to the plugins directory, or via an external plugin) so that they can be specified on a popover by popover basis. I'll work on a quick tutorial on how to do this so that you can add in your own styles, but I'll also be working on adding new styles in future updates.

    New styles weren't added in the last update because we already had some major changes to the plugin in that release, and wanted to limit the amount of change introduced at one time.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.