Search code examples
jqueryblockuijquery-blockui

jquery blockUI nothing happens on button click

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.blockUI.js"></script>
        <script>
            $(document).ready(function() {
                $('#fullscreen').click(function() {
                    $.blockUI({
                        message: $('#fs_div'),
                        css: {
                            top: 0,
                            left: 0,
                            width: 100%
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <button id="fullscreen">Fullscreen</button>
        <div id="fs_div" style="display: none;">Fullscreen Div</div>
    </body>
</html>

I have written a simple code as above to display jquery blockUI box but nothing happens on clicking the button. I looked around for solutions but I am not able to figure out where I am going wrong.

Solution

  • Just change your width parameter to width: '100%' Fiddle: http://jsfiddle.net/zFSGq/