How to open a popup with a link

To open a poup with a link, in the Custom jQuery of the popup enter :
var notview=1;
Now you have different choice to open the popup :

– directly in the link, enter your link like that :
<a href="javascript:void()" onclick='jQuery("#popup").modal({open:true,closeClass:"popoup-front-close",overlayClose:true})'>Open Pop Up</a>
– with a class, for example all links with the “openPopUp” class, enter
this in the Custom jQuery :
jQuery('a.openPopUp').click(function(){
jQuery("#popup").modal({open:true,closeClass:"popoup-front-close",overlayClose:
true});

WARNING WITH NEW VERSION OF WORDPRESS

The new version of wordpress can no longer change the url in the editor, now, it's better to use a shortcode, here for example a code that you can add in the functions.php file of your theme


function ahref_func($atts, $content=null) {
extract( shortcode_atts( array(
'href' => '',
'onclick' => '',
'rel' => '',
'title' => '',
'name' => ''
), $atts ));
$onclick = "{$onclick}";
if($onclick){
$onclickcode = " onclick=\"".$onclick."\"";
}
$rel = "{$rel}";
if($rel){
$relcode = " rel=\"".$rel."\"";
}
$title = "{$title}";
if($title){
$titlecode = " title=\"".$title."\"";
}
$name = "{$name}";
if($name){
$namecode = " name=\"".$name."\"";
}
return "<a href="\"{$href}\"".$onclickcode.$relcode.$titlecode.$namecode."">" . $content . "</a>";
}
add_shortcode('a', 'ahref_func' );

Now you can use this shortcode in your post or page

[a href="javascript:void()" onclick="jQuery('#popup').modal({open:true,closeClass:'popoup-front-close',overlayClose:true})"]Open the popup with a link[/a]


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


How to make WP Polls popup with WPSubscribers

Engaging users with polls is a great way to know more about them, they feel you are interested in their opinion and valuable feedbacks. This way, not only you make them happy ( if you know how to ask the good questions ) but you will also learn a lot about needs and wishes.

To make this tutorial , we will use another plugin called WP Polls, you can download it here

http://wordpress.org/extend/plugins/wp-polls/

you will see, it is very easy to use it, if you think we need to make a video to manage this part, just ask

Read the rest of this entry »