Click here to Skip to main content
11,924,825 members (55,099 online)
Rate this:
Please Sign up or sign in to vote.
Hi friends,

I am new to Jquery. I want to open a modal pop up window on click of a button. The Gridview will be filled by some data. if the gridview contains some data, then that data i want to display in modal pop up.If the gridview doesn't contains data, then I want to display a message box saying that 'The Data is not available'. I am able to display a dialog box on load of the page but not on click of a button. I am not able to apply proper CSS like display block and none.

Help me to solve the problem.....
Posted 23-Dec-12 21:42pm
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

I have written an article on how to load dynamic content into a jQuery Modal dialog window.

[Take a look at this article ^]

You will get a basic idea as to how to accomplish this.
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Hi, hope my explanation will help you.

First of all make sure that you have referenced to jquery libraries: for example

        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>
        <link href="" rel="stylesheet" type="text/css" />

Then in your page declare some pop-up dialog:

<div id="CheckMessagesDialog" style="display: none">
<button id="testBtn">Press me</button>

On page ready event handler add few initialization lines:

$(document).ready(function () {
				autoOpen: false, modal: true,
				width: 450, height: 400,
				hide: "explode", show: "blind",
				closeOnEscape: true,
				buttons: {
					"Close": function () {
				open: function (event, ui) {
if ($("#MessagesDialog").dialog("isOpen") === true) {
$("#MessagesDialog").dialog({ title: "Hello tittle" });

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web04 | 2.8.151125.3 | Last Updated 24 Dec 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100