How to use Jquery Thick Box in an asp.net application

Home

ASP.Net & C#

SQL

MVC

Interview Questions & Answers

Others

How To Use JQuery Thickbox.js Popup

Thickbox is a UI dialog widget which uses javascript and jquery. This is just like a pop up which can be used for displaying images, simple alerts and iframed contents etc.
There are many advantages while we using javascript thick box for such purposes. The main reasons are 

• Multiple contents that can be displayed in the popup. Like images, simple text messages, iframe etc
• It remains in the centre of the browser even we are scrolling the browser.
• It is very light weight so easy to load.

It is very simple to implement Thick box popup in your webpage. We need to do only simple steps for this.

1. Add the jquery library thickbox.js. You can download and save the library from here. Select all contents from this page and save in a file with name thickbox.js . ( Jquery library file)
2. Next we need the style sheet assosiated with this popup. You can get this from here. Select all contents from this page and save in a file with name thickbox.css . ( style sheet file ).

I did not get these .js and .css from the net. That is the reason I have added it as a separate page.

Now it is all downloaded. Next we need to add these references to our page. I have kept these files (.js and .css) in my Scripts and Styles folder.

We can add refernces just by dragging the file into the head tag of the HTML or Just adding these line

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="Scripts/thickbox.js" type="text/javascript"></script>

<link href="Styles/thickbox.css" rel="stylesheet" type="text/css" />

Plese make sure that you have downloaded and kept these files in a folder inside your application. 

Now everything is done. Now we can simply call this from our page. 

<div onclick="clickForThickBox('My Page Header');" id="divThickBox">

 Click me 

</div>

Please add the script function below also in the html head.

<script  type="text/javascript">

        function clickForThickBox(title) {

            $(document).ready(function () { tb_show(title, "mypage.aspx?TB_iframe=true&width=700&height=500", null); });

        }

    </script>

Now everything is completed. 

You can simply use the div and function for displaying the page. Here My page name is mypage.aspx. so i have given this in the function.

the contents in the mypage.aspx will be displayed in the popup.

How To Make JQuery Thickbox Popup height and width dynamic

In the original thickbox.js library, height and width we are passing as parameter to the calling function. So the height and width are fixed according to the height and width we are passing. It will be difficult at some point where the window height is smaller or the window is very large. The content popup height will remain fixed.

To over come this difficulty, I have added a new function in the thickbox.js file with name tb_show1();
In this function, the popup height is 90% of the window height and width is 70% of the window width. 

So if you want the height and width dynamic, just use below code

<div onclick="clickForThickBox('My Page Header');" id="divThickBox">

 Click me 

</div>

Please add the script function below also in the html head.

<script  type="text/javascript">

        function clickForThickBox(title) {

            $(document).ready(function () { tb_show1(title, "mypage.aspx?TB_iframe=true&width=700&height=500", null); });

        }

    </script>


Thanks for reading my post. Have a great day :)