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)

  Print Answers RSS
0 Schatak 394
1 OriginalGriff 355
2 _Amy 115
3 Sergey Alexandrovich Kryukov 109
4 Andreas Gieriet 100
0 OriginalGriff 7,097
1 Sergey Alexandrovich Kryukov 5,623
2 Maciej Los 3,504
3 Peter Leow 3,373
4 DamithSL 2,505


Advertise | Privacy | Mobile
Web03 | 2.8.140721.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