|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientSide.aspx.cs" Inherits="InPagePopup.ClientSide" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Client Side - In-page Pop up</title>
<link rel="stylesheet" href="Styles/Style.css" />
</head>
<body>
<form id="form1" runat="server">
<ul>
<li>
<input type="button" id="ModalPopUp_SemiTransparentBG" value="Modal PopUp with Semi Transparent Background" onclick="ShowModalPopUp_SemiTransparentBG();" />
</li>
<li>
<input type="button" id="ModalPopUp_TransparentBG" value="Modal PopUp with Transparent Background" onclick="ShowModalPopUp_TransparentBG();" />
</li>
<li>
<input type="button" id="PopUp_NoBG" value="PopUp without Background" onclick="ShowPopUp_NoBG();" />
</li>
</ul>
<div id="SemiTransparentBG" class="fadePanel semiTransparent">
</div>
<div id="TransparentBG" class="fadePanel transparent">
</div>
<div id="PopUp" class="Popup">
<div class="InnerPopup">
<p>Here is the body of a pop up element.</p>
<p id="PopUpBody"></p>
<p>
<input type="button" id="Close" value="Close" onclick="ClosePopUp();" />
</p>
</div>
</div>
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Hide all pop up related elements during page ready.
ClosePopUp();
});
function ShowModalPopUp_SemiTransparentBG() {
$("#SemiTransparentBG").show('slow');
$("#PopUp").show('slow');
$("#PopUpBody")[0].innerHTML = "This popup brings a visual effect that tell user, they are not allow to click the background controls until this popup being closed.";
};
function ShowModalPopUp_TransparentBG() {
$("#TransparentBG").show('slow');
$("#PopUp").show('slow');
$("#PopUpBody")[0].innerHTML = "This popup <b>doesn't</b> brings a visual effect that tell user, they are not allow to click the background controls until this popup closed. </br> </br> <b>In fact</b>, they cannot click the background controls. ^^";
};
function ShowPopUp_NoBG() {
$("#PopUp").show('slow');
$("#PopUpBody")[0].innerHTML = "This popup will not block access to any visible background controls.";
};
function ClosePopUp() {
$("#SemiTransparentBG").hide('slow');
$("#TransparentBG").hide('slow');
$("#PopUp").hide('slow');
};
</script>
</form>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
Submit an article or tip