Post
Ask Question

First Look of Pop Up using simple JavaScript

Background
 
Last year, I got an outside project. The project was normal for anyone with more than one year of experience but no knowledge of JavaScript and CSS. The customer wanted popup windows for logging in the user. I encountered many problems when I tried to make the popup windows. So I will share a simple and perfect solution for popup windows without any lengthy JavaScript coding.
 
Requirements 
 
No use of special jQuery for this popup window and no use also of special CSS.
 
Example
 
In the article make a login popup window. The Login Control is a server control. How it works is shown below.
 
I take two link buttons, this button is purely an HTML control. 
  1. <div class="users">    
  2.                <div><a class="exist">Existing User</a> <a class="new">New User</a> </div>    
  3.            </div>   
Look at the preceding, there is no call to any function. I created a simple div. This div contains another div.
 
When I click a button the pop window is shown. 
 
 
When I click on the button, I need to call a JavaScript function.
  1. $(document).ready(function () {  //Ready function working when a complete window ready for work  
  2.     
  3.            $('.exist').click(function () {     //.exit is class in CSS  
  4.                var windowidth = ($(window).width() - 370) / 2;  // for width used for the windows pop up  
  5.                var windoheight = ($(window).height() - 290) / 2;  // For Height used for the windows pop up  
  6.                $('#login').css({ 'left': windowidth + 'px', 'top': windoheight + 'px' });   // Login is css class for Login window popup  
  7.                $('.light-container-1').css('height', $(document).height());  // light-container-1 is also another css class for used windows pop up.  
  8.                $('.light-container-1').show();    
  9.     
  10.            });   
Light-container-1 is the CSS used for the popup window. This CSS has nothing special but has a single image. This image covers the background window.
  1. .light-container-1    
  2.         {    
  3.             background: url("xyz/fancybox_overlay.png") repeat;    
  4.             display: none;   
  5.             float: left;    
  6.             position: fixed;    
  7.             width: 100%;    
  8.             z-index: 1;    
  9.             top: 0;   
  10.             left: 0;    
  11.         }   
If there is any doubt in your mind then look at this picture, it will clear everything up for you.
 
 
Hide the popup windows using JavaScript. 
  1. $('.close-me').click(function () {      // Cross the button of pop window  
  2.                $('.formError').remove();   
  3.                $('.light-container-1').hide(); //Hide the class  
  4.                $('.light-container-2').hide();  //Hide the class  
  5.     
  6.            });   
Login Control 
  1. <div class="login-card">    
  2.                    <label>    
  3.                        Email :    
  4.          <asp:TextBox ID="TxtEmailForget" runat="server"></asp:TextBox>    
  5.                         <asp:RegularExpressionValidator ID="RegularExpressionValidator2" ValidationGroup="forgotpwd" style="font-size:13px; color:red;"    
  6.  runat="server" ErrorMessage="Invalid email address."    
  7.  ControlToValidate="TxtEmailForget"     
  8.  ValidationExpression="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$" />    
  9.                    </label>    
  10.                      <div class="lr">                           
  11.                        <asp:Button ID="btnForgetPwd" runat="server" CssClass="btnForgetPwd"  Text="Reset Password" ValidationGroup="forgotpwd"  OnClick="btnForgetPwd_Click" />    
  12.                    </div>    
  13.                    <a href="javascript:void(0)" onclick="showLogin();">Back to login</a>    
  14.                      
  15.     
  16.                    <div class="login-help"></div>    
  17.                </div>    
  18.            </div>   

Advantage

  • I have many times a server control that can't work after popup windows.  Don't worry, this popup is working in the server control and I have used a server control. 
     
  • No special need for JavaScript and CSS. 
     
  • No need for a Reference of any type for JavaScript. 

Summary

 
I think there is no need for the project code, I have already shared all the relevant code. I hope this article is useful for everybody. If anyone has an issue about this article then drop your query in the comments box.


Similar Articles