1

I'm trying to build simple modal window using jquery ui implementation in my custom module. I want to show this modal once when user visit my website. I choose implementation with cookie. How to make this modal appears once to user when he visit my website? should I use hook_init?

this is my codes:

mymodule.module

/* menu callback */
function mymodule_menu() {
    $items['mymodule-popup'] = array(
        'title' => 'Join Club',
        'page callback' => 'mymodule_ajax_register',
        'page arguments' => array(1),
        'access callback' => TRUE,
        'type' => MENU_CALLBACK
    );

    return $items;
}

function mymodule_ajax_register() {
    $path = drupal_get_path('module', 'mymodule');
    drupal_add_library('system', 'ui.dialog', false);
    drupal_add_library('system', 'ui.draggable', false);
    drupal_add_js($path.'/mymodule.js');

    $output = '';
    $webform_nid = 30;
    $node = node_load($webform_nid);
    $submission = (object) array();
    $webform = drupal_get_form('webform_client_form_'.$webform_nid, $node, $submission);
    $output .= '<div id="popup">';
    $output .= drupal_render($webform);
    $output .= '</div>';

    return $output;
}

mymodule.js

(function ($) {
$(document).ready(function(){
    $('#popup').dialog({
        height: 'auto',
        width: 700,
        autoOpen: false,
        modal: true,
    resizable: false
    });

    $('a').click(function(){
        var status = false;
        if(this.className !== 'lightbox-processed'){
            if(!getCookie('newspopup')){
                setCookie('newspopup', 'true', 1);
                $('#popup').dialog('open');
            }else{status = true;}
            if(this.className === 'ui-dialog-titlebar-close ui-corner-all ui-state-hover'){
                $('#popup').dialog('close');
                status = true;
            }else{
            }            
        }
        if(this.id === 'bottomNavClose'){
            $('#popup').dialog('close');
        }
        return status;
    });

    function setCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)===' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function deleteCookie(name) {
        setCookie(name,"",-1);
    }
});
})(jQuery);

with those codes, when user visit myweb.com/mymodule-popup then click any link/url, modal window (pop up window) will appears.

How to make modal window appears once every time user visit my website?

I need advise from you guys, Thanks before.

2 Answers 2

2

Why invent a new module while there are existing, well-supported ones?

Two existing modules:

  • The popup_message does what you want and has a lot of features and a large installed base.
  • popup_announcement - this is a relatively new module with full html support, but with only a few downloads.
4
  • To answer why: Sometimes these modules are simply too much and site becomes too slow. Sometimes it's meant as a part of someone's own module and it's easier to make it anew than to ask strangers to provide hooks you would need. And sometimes it's just an exercise, something one is doing to learn. And sometimes, of course, it's the pure lack of knowledge about ready-made options ;)
    – Mołot
    Sep 4, 2013 at 7:26
  • Learning is a good argument. But to make Drupal stronger we must reuse more - this way we will have better modules. Even while learning, the abovementioned modules may serve as code examples.
    – Druvision
    Sep 4, 2013 at 7:33
  • Well, only one of my requests for hooks was ever fulfilled, and it was months to wait. My request to restore views functionality that got removed recently (but stayed described as present in the docs) was ignored, even when I provided patch for it. And so on. Sorry, reuse is good idea, but not when you need your job done and deadline is closer than years...
    – Mołot
    Sep 4, 2013 at 7:39
  • "Hook requests were never fullfilled"? So question is how to convince them. Maybe open a new module rating site where pepole will get rating depending on the level of support they give. But that's a meta-discussion.
    – Druvision
    Sep 8, 2013 at 20:26
0

The way I did it was as follows:

  1. In .module file I provided a HTML output for my modal window.
  2. In .info, CSS and JS files was added.
  3. CSS defined overlay and window, so all I needed to do to switch it visible / invisible was to change one element's class, add or remove .modal_visible (name of the class does not really matters but that's what I used)
  4. In JS I created behavior, and algorithm as follows:
    1. If the context was not right (IE new elements added instead of page load), end.
    2. If the cookie "already seen" is set, end.
    3. Set "already seen" cookie
    4. Attach function to close button's onclick, to remove .modal_visible from overlay
    5. Add .modal_visible to overlay

I sold copyright to code, but algorithm should be simple enough to reuse.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.