Introduction
In this article i will show you how a login form appear in modal popup. I will give you an example of modal pop with login or register control. When we click on login button then modal popup appears with login form , now user can login from this window.
Description
In previous article i explained how to show modal pop using JQuery. Here we use same article for modal popup but something change in division.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs" Inherits="Default11" %>
<%@ Register Src="~/logincontrol.ascx" TagPrefix="uc1" TagName="logincontrol" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$('#Button1').click(function () {
$('#popup').dialog({
title: "Login Control",
width: 500,
height: 500,
modal: true,
buttons: {
close: function () {
$(this).dialog('close');
}
}
});
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="popup" title="Login Form" style="display:none">
UserName: <input id="Text1" type="text" /> <br />
Password: <input id="Text2" type="text" /> <br />
<input id="loginbtn" type="button" value="Login" />
</div>
<input id="Button1" type="button" value="click to login" />
</div>
</form>
</body>
</html>
In this article i will show you how a login form appear in modal popup. I will give you an example of modal pop with login or register control. When we click on login button then modal popup appears with login form , now user can login from this window.
Description
In previous article i explained how to show modal pop using JQuery. Here we use same article for modal popup but something change in division.
Source Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs" Inherits="Default11" %>
<%@ Register Src="~/logincontrol.ascx" TagPrefix="uc1" TagName="logincontrol" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$('#Button1').click(function () {
$('#popup').dialog({
title: "Login Control",
width: 500,
height: 500,
modal: true,
buttons: {
close: function () {
$(this).dialog('close');
}
}
});
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="popup" title="Login Form" style="display:none">
UserName: <input id="Text1" type="text" /> <br />
Password: <input id="Text2" type="text" /> <br />
<input id="loginbtn" type="button" value="Login" />
</div>
<input id="Button1" type="button" value="click to login" />
</div>
</form>
</body>
</html>
Code Generate the following output
