jquery blockUI nothing happens on button click

StackOverflow https://stackoverflow.com/questions/12215916

  •  29-06-2021
  •  | 
  •  

Question 

<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.

Was it helpful?

Solution

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

OTHER TIPS

<div id="fs_div" style="display: none;">Fullscreen Div</div>

you are setting width:100%

this will do that

                        css: {
                            top: 0,
                            left: 0,
                            width: '100%'
                        }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top