Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET jQuery JQueryUI
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
Rockstar_5.7K
Rate this: bad
good
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
 
<head>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>
 

Then in your page declare some pop-up dialog:
 
<div id="CheckMessagesDialog" style="display: none">
</div>
<button id="testBtn">Press me</button>
 
On page ready event handler add few initialization lines:
 
$(document).ready(function () {
$('#MessagesDialog').dialog({
				autoOpen: false, modal: true,
				width: 450, height: 400,
				hide: "explode", show: "blind",
				closeOnEscape: true,
				buttons: {
					"Close": function () {
						$(this).dialog("close");
					}
				},
				open: function (event, ui) {
				}
			});
 
}
 
$('#testBtn').click(function(){
if ($("#MessagesDialog").dialog("isOpen") === true) {
    $("#MessagesDialog").dialog("close");
}
$("#MessagesDialog").dialog({ title: "Hello tittle" });
$("#MessagesDialog").dialog('open');
});
  Permalink  
Rate this: bad
good
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.
  Permalink  

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



Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 24 Dec 2012
Copyright © CodeProject, 1999-2014
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