locked
Modal Popup RRS feed

  • Question

  • User1979860870 posted

    Hi

      I have below Login Page . I want Login Page should open as Modal Popup 

    User should not be able to click on Master Page until User is not Logged In.

    Login Page
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="MyApp.Login" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="frmLogin" runat="server">
            <div class="container">  
               <div class="row">  
                   <div class="col-lg-5 col-md-6 col-sm-8 col-xl-12 " style="margin: auto; float: initial; padding-top: 12%">  
                       <div class="row userInfo">  
      
                           <div class="panel panel-default ">  
                               <div class="panel-heading">  
                                   <h3 class="panel-title" style="text-align: center; font-weight: bold">  
                                       <a class="collapseWill">Login to your Account</a>  
                                   </h3>  
                               </div>  
                               <div id="collapse1" class="panel-collapse collapse in">  
                                   <div class="panel-body">  
                                       <fieldset>  
                                           <div class="form-group">  
                                               <div class="col-md-"></div>  
                                               <label class="col-md-12 control-label" for="prependedcheckbox">  
                                                   User ID  
                                               </label>  
                                               <div class="col-md-12">  
                                                   <div class="input-group">  
                                                       <span class="input-group-addon">  
                                                           <i class="fa fa-user"></i>  
                                                       </span>  
                                                       <asp:TextBox ID="txtUserName" CssClass="form-control" placeholder="Enter User ID" runat="server"></asp:TextBox>  
                                                   </div>  
                                                   <asp:Label ID="lblErrUserName" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>  
                                               </div>  
      
                                               <label class="col-md-12 control-label" for="prependedcheckbox">  
                                                   Password  
                                               </label>  
                                               <div class="col-md-12">  
                                                   <div class="input-group">  
                                                       <span class="input-group-addon">  
                                                           <i class="fa fa-lock"></i>  
                                                       </span>  
                                                       <asp:TextBox ID="txtPassword" CssClass="form-control" placeholder="Enter Your Password" runat="server" TextMode="Password"></asp:TextBox>  
                                                   </div>  
                                                   <asp:Label ID="lblErrPassword" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>  
                                               </div>  
      
                                               <div class="col-md-12">  
                                                   <div class="col-lg-6">  
                                                       <asp:CheckBox ID="chbRemember" Visible="false" runat="server" Text="Remember" />  
                                                   </div>  
                                                   <div class="col-lg-6">  
                                                       <div class="input-group" style="width: 100%">  
                                                           <asp:Button ID="btnLogin" CssClass="btn btn-success" Text="Login" OnClientClick="return FunForLoginValidation()" runat="server" Style="width: 100%" />  
                                                       </div>  
                                                   </div>  
                                               </div>  
                                           </div>  
                                       </fieldset>  
      
                                   </div>  
                               </div>  
      
                               <div class="panel-heading">  
                                   <div class="panel-title" style="text-align: right">  
                                       <a class="collapseWill" href="SellerForgetPassword.aspx" style="font-size: x-small">Forgot Username or Password?  
                                       </a>  
                                   </div>  
                               </div>  
                           </div>  
                       </div>  
                   </div>  
               </div>  
           </div>  
        </form>
    </body>
    </html>

    Thanks

    Saturday, May 22, 2021 12:08 PM

All replies

  • User475983607 posted

    I have below Login Page . I want Login Page should open as Modal Popup 

    Your current design is not a modal.  It is an entire web page. 

    I recommend implementing a modal library like Bootstrap.  You can learn the basics by reading the Bootstrap reference documentation.

    https://getbootstrap.com/docs/4.0/components/modal/

     

    Saturday, May 22, 2021 2:04 PM
  • User1979860870 posted

    Hi

      I have below code but still i am able to click on Master Page

    <div id="myModal" >
    	<div class="modal-dialog modal-login">
    		<div class="modal-content">
    
    				<div class="modal-header">				
    					<h4 class="modal-title">Login</h4>
    					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    				</div>
    				<div class="modal-body">				
    					<div class="form-group">
    						<label>Username</label>
    						<input type="text" class="form-control" required="required">
    					</div>
    					<div class="form-group">
    						<div class="clearfix">
    							<label>Password</label>
    							<a href="#" class="float-right text-muted"><small>Forgot?</small></a>
    						</div>
    						
    						<input type="password" class="form-control" required="required">
    					</div>
    				</div>
    				<div class="modal-footer justify-content-between">
    					<label class="form-check-label"><input type="checkbox"> Remember me</label>
    					<input type="submit" class="btn btn-primary" value="Login">
    				</div>
    
    		</div>
    	</div>



    Thanks

    Saturday, May 22, 2021 3:41 PM
  • User-939850651 posted

    Hi jagjit saini,

    I have below code but still i am able to click on Master Page

    In this case, I think you have to set whether Master Pgae can be operated according to the login information of the current user.

    For example, determine whether the user exists in PageLoad, and then set the status of the page content based on the result.

    Similar functions can be achieved by adjusting the css style:

            <div runat="server" id="contentDiv">
                ...
                <!-- page content -->
            </div>
    protected void Page_Load(object sender, EventArgs e)
            {
                if (Session["LoginUser"] != null)
                {
                    contentDiv.Style.Remove("pointer-events");
                }
                else
                {
                    contentDiv.Style.Add("pointer-events", "none");
                }
            }

    Hope this can help.

    Best regards,

    Xudong Peng

    Monday, May 24, 2021 2:50 AM