Click here to Skip to main content
12,396,461 members (35,151 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 20:42pm
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" });
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.

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
Web02 | 2.8.160721.1 | Last Updated 24 Dec 2012
Copyright © CodeProject, 1999-2016
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