How to use a call action in popup with WPSubscribers

For a personal website, I would like to use a call to action button that open a new window and close the popup after the click. Because indeed, WPSubscribers can be used for promoting messages other than optin form for newsletter. Click here to review all the features of WP Subscribers

Today let's see a tutorial about how to make a popup without a subscribe button. directly optimized with JQuery flexible section of custom popup editor.

Here the live example and the screenshot :

To do that I use custom CSS to design the button and Custom jQuery for the action

The html is :
<div class="bouton grand rose divcenter">
<div>
<p><strong>Votez pour Serial-Cooker.com</strong><br /><small>Concours Blog Cuisine jusqu'au 30 avril 2012</small></p>
</div>
</div>

Custom CSS :
{text-align: center;font-size: 25px;font-weight: bold;font-family: arial,verdana,tahoma;color:#000}
.bouton{text-align: center;font-size: 25px;font-weight: bold;text-shadow: 1px 1px 1px black;font-family: arial,verdana,tahoma;cursor: pointer;}
.bouton{border: 2px solid #dfe0db;border-radius: 55px;-moz-border-radius: 55px;-webkit-border-radius: 55px;-khtml-border-radius: 55px;font-size: 24px;font-weight: bold;color:#fff;}
.rose{background: #d3133c;background-image: -moz-linear-gradient(100% 100% 90deg, #F36B91, #F34276 );background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F34276), to(#F36B91));margin:0 auto;}
.rose:hover{background: #d3133c;background-image: -moz-linear-gradient(100% 100% 90deg, #F34276, #F36B91 );background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F36B91), to(#F34276));text-shadow:none}
.grand{width:555px;height:113px;}
.grand div{text-align:center}
.grand div p{font-size: 24px;font-weight: bold;color:#fff;padding-top:10px;margin:0;line-height:20px;}
.grand div p strong{font-size:30px;line-height:50px;}
.grand div p small{font-size:15px;line-height:15px;}
.wpslink{color:#fff;text-decoration:none}
.wpslink:hover{color:#fff;text-decoration:none}

And Custom jQuery :

jQuery(".bouton").click(function() {jQuery.modal.close(); window.open('http://www.marieclaireidees.com/sap/blogcuisine2011/entrant/54570#sharetools');});






Comments are closed.