Click here to Skip to main content
12,950,832 members (57,001 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
Rockstar_5.7K
Updated 27-Jul-16 11:43am
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  
Comments
Member 12657088 27-Jul-16 17:43pm
   
Here is the best video showing how to create a custom popup using jquery. https://youtu.be/zK4nXa84Km4 This video includes all the steps need to do for a custom pop and a great look to HTML + CSS + jQuery
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

Quote:
Here is the best video showing how to create a custom popup using jquery. https://youtu.be/zK4nXa84Km4 This video includes all the steps need to do for a custom pop and a great look to HTML + CSS + jQuery
  Permalink  

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
OriginalGriff 5,984
CHill60 3,460
Maciej Los 3,053
Jochen Arndt 1,975
ppolymorphe 1,820


Advertise | Privacy | Mobile
Web01 | 2.8.170525.1 | Last Updated 27 Jul 2016
Copyright © CodeProject, 1999-2017
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