Redirect with jQuery UI Dialog

(Comments)

Remeber the last post I talked about a straightforward countdown redirect? Turns out sometimes that's not good enough, in cases you want to give user the right to manually click on something to fire the redirection off. 

So this time I will talk about a more modern feel of redirecting method, taking advantage of jQuery again! (I love jQuery, if you missed the Date Picker post, check it out! )

The tool we are going to use today is called "jQuery UI Dialog". 

I basically built a jQuery UI Dialog, let it overlay the webpage, and disabled the close button. Again, the code can be break up and inserted into disired pages. In our case, it's Encore, but you can modify and use the code anywhere you would like to.

The key part of the code looks like this, and you of course should replace the redirect URL: 

<script>
    function Redirect(){
        window.location="http://fishbb.pythonanywhere.com";
    };
    $( function() {
        $( "#dialog-confirm" ).dialog({
            dialogClass: "no-close",
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
            "OK": function() {
                 Redirect();
            },
         }
    });
} );
</script>

When user open the Encore homepage, they will see the dialog box come up, and the dialog box will give user some context of why we want them to get redirected. Once they complete the reading, they can click the "OK" button to go to the redirected website, or they can, well, there is not really anything they could do. The dialog box will block any action off on the Encore homepage. Of course, if you so choose, you can also enable the close button of the dialog box, so users can continue accessing the Encore website without an issue.  

The full source code is available in GitHub

Currently unrated

Comments