Click here to Skip to main content
Rate this: bad
good
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
Rockstar_5.6K
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
Your Filters
Interested
Ignored
     
0 Shai Vashdi 1,838
1 Tadit Dash 310
2 OriginalGriff 283
3 Sergey Alexandrovich Kryukov 260
4 Peter Leow 220
0 Sergey Alexandrovich Kryukov 9,440
1 OriginalGriff 5,618
2 Peter Leow 4,280
3 Maciej Los 3,540
4 Abhinav S 3,363


Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 24 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid