Topics

1

WP-Polls / Script to make WP Polls popup

« on: 20 November 2011, 16:46 »

I'm using WP POLLS and I like it, but I wanted to have it popup for my users to vote.
I did find a script on the net that does exactly that, author of this script is Gaetan Renaudeau, http://gaetanrenaudeau.fr/
A good friend of mine from Netherlands (Marcel Bokhorst) did some changes in the script for me to make it work with WP Polls.
Name this script wp-polls-popup.js :

jQuery(document).ready(function($) {
  var pollWidget = $('.widget_polls-widget')
  if(pollWidget.size() && $('input:visible', pollWidget).size()) {
   var clone = $(pollWidget).clone().removeClass('widget_polls-widget');
   $('a', clone).remove();
   $('input', clone).click(function(){
     $('.widget_polls-widget input[value='+$(this).val()+']').attr('checked', 'checked');
   });

   $('input', clone).each(function(){
     var id = $(this).attr('id');
     var newId = 'popup_'+id;
     $('label[for='+id+']', clone).attr('for', newId);
     $(this).attr('id', newId);
   });

   $('input[type=button]', clone).addClass('closepopup');

   $('strong:first', clone).css('font-size', '14px');
   var blackback = $('<div id="blackback" />').css({
     opacity: 0.5,
     background: 'black',
     position: 'fixed', top: 0, left: 0,
     width: '100%', height: '100%',
     zIndex: 998
   }).appendTo('body');

   var popup = $('<div id="popup" />').css({
     zIndex: 999,
     position: 'fixed',
     top: '25%',
     left: '25%',
     width: '50%',
     background: 'white',
     borderRadius: '10px',
     boxShadow: '0px 2px 4px black',
     padding: '10px'
   });
   var a = $('<a class="closepopup" href="javascript:;" />').text('close').css({
     float: 'right',
     marginRight: '10px'
   });
   popup.append(a).append(clone);
   popup.appendTo('body');

   $(document).click(function(e){
     var target = $(e.target);
     if(target.is('.closepopup') || !target.is('#popup') && target.closest('#popup').size()==0)
     {
      blackback.remove();
      popup.remove();
     }

   });
  }
});


Usage:
You have to use WP Polls widget for this popup script to work.
Upload script to WP Polls plugin folder.
Put this in themes functions.php file:
 
// WP Polls popup
add_action('init', 'wp_polls_popup_js');
function wp_polls_popup_js() {
  wp_enqueue_script('jquery');
  wp_enqueue_script('wp-polls-popup-js', 'http://www.mysite.com/wp-content/plugins/wp-polls/wp-polls-popup.js', array('jquery'));
}
 
That's it!