<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
STEP 1: ADD JQUERY REFERENCES…
<link rel="stylesheet" href="JQueryCurrent/jquery-ui-1.12.1/jquery-ui.css">
<script src="JQueryCurrent/jquery-3.3.1.min.js"></script>
<script src="JQueryCurrent/jquery-ui-1.12.1/jquery-ui.js"></script>
<body>
<form id="form1" runat="server">
<div style="font-size: 14px">
helo<br />
world<br />
<br />
STEP 2: ADD LINK BUTTONS…
<!-- Link buttons to open the Popup div -->
<asp:LinkButton ID="lbToggle" runat="server" onclientclick="ToggleRatingInfo();return false;" Font-Names="Arial" Font-Size="14pt">Open with window 'x'</asp:LinkButton><br /><br />
<asp:LinkButton ID="LinkButton1" runat="server" onclientclick="ToggleRatingInfo2();return false;" Font-Names="Arial" Font-Size="14pt">Open, hide window 'x'</asp:LinkButton>
STEP 3: ADD POPUP DIV(s), display:none…
<!-- ********************************************************************************************************************************************************************************* -->
<!-- Here's our popup div -->
<div id="dvMyDiv" style="display:none; background-color: lightblue;">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<button onclick="AutoClose()">Click me to close</button>
<br />
<br />
<!-- How to load an exernal page into the div -->
<div id='dvExternalPage' style="height:300px;background-color: lightyellow;"">
<script>
document.getElementById("dvExternalPage").innerHTML = '<object style="width:100%; height: 100%;" type="text/html" data="externalpage.aspx" ></object>';
</script>
</div>
</div>
<!-- ********************************************************************************************************************************************************************************* -->
</div>
</form>
</body>
</html>
STEP 4: ADD POPUP FUNCTION(s)…
<script>
function ToggleRatingInfo() {
//**********************************
// if you want to add the overlay...
//***************************************************************************************************
$('head').append('<style type="text/css">.ui-widget-overlay.ui-front {opacity:.75; }</style>');
//***************************************************************************************************
// ***************
// HAS close x
// ***************
$("#dvMyDiv").dialog({ title: "my title!",
buttons: [{ text: "Ok1", click: function() {$(this).dialog("close");}} , {text: "Ok2", click: function() {$(this).dialog("close");} }],
close: CloseFunction,
closeOnEscape: false,
modal: true,
show: 'fade',
hide: 'fade',
width: 600,
height: 600,
appendTo: '#form1'
})
} // End of ToggleRatingInfo Function
function ToggleRatingInfo2() {
// ***************
// NO close 'x'
// ***************
//**********************************
// if you want to add the overlay...
//***************************************************************************************************
$('head').append('<style type="text/css">.ui-widget-overlay.ui-front {opacity:.75; }</style>');
//***************************************************************************************************
$("#dvMyDiv").dialog({ title: "my title!",
buttons: [{ text: "Ok1", click: function() {$(this).dialog("close");}} , {text: "Ok2", click: function() {$(this).dialog("close");} }],
close: CloseFunction,
closeOnEscape: false,
modal: true,
show: 'fade',
hide: 'fade',
width: 600,
height: 600,
appendTo: '#form1'
}).prev().find(".ui-dialog-titlebar-close").hide();
} // End of ToggleRatingInfo Function
function CloseFunction() {
alert('you closed it');
}
function AutoClose() {
alert('in the AutoClose() function');
$(this).dialog("close");
}
</script>
Extra Credit.. JQuery Popup from code behind…
Step 1 Code Behind…
Dim message As String = "Message from server side"
ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup('" + message + "');", True)
Step 2 Note, this function needs to be at the TOP of the html page
<script>
function ShowPopup(message) {
$("#jqPopup").html(message);
$("#jqPopup").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
};
</script>
Step 3 Hidden jquery popup div…
<div id="jqPopup" style="display: none"></div>
Extra Credit.. Close JQuery Popup from External
Page…
On the
external page, place a button with this OnClientClick..
<asp:Button ID="Button1" runat="server" Text="close me" OnClientClick="CloseMe();return false;" />
On
the external page, add this javascript function…
<script>
function CloseMe()
{
window.parent.CloseFromExternalPage();
}
</script>
On
the Parent Page, add this javascript function…
function CloseFromExternalPage() {
$('#dvMyDiv').dialog('close');
return false;
}