menu

Tuesday 14 April 2015

CSS POPUP without using js

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="popup.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="modal">
  <input id="modal" type="checkbox" name="modal" tabindex="1"  style="display:none">
  <label for="modal" >For Admission Query</label>
  <div class="modal__overlay">
    <div class="modal__box">
      <label for="modal">&#10006;</label>
      <div class="form-layout" style="width: 485px;">
        <div  class="title3" style="font-size:27px;">Website Design & Developent</div>
        <p class="p" style="margin-bottom: 8px;">Contact for - 7398623742</p>
        <p class="p"> <a href="http://e-technology.co.in/" target="_new" style="color:#fff">E-Technology</a> </p>
        <form action="#" method="post" name="myform" class="form" style="width:70%; margin-left: 70px;  ">
          <input type="text" name="name" id="name" placeholder="Name"  >
          <input type="varchar" name="phone" id="phone" placeholder="Mobile No.") {this.placeholder= 'Mobile No.';}" >
          <input type="email" name="email" id="email" placeholder="Email" ) {this.placeholder= 'Email';}" >
          <select name="course" id="course" style="width:104%;">
            <option value="B.Tech" selected >B.Tech</option>
            <option value="MBA" selected >MBA</option>
            <option value="PGDM" selected >PGDM</option>
            <option value="BBA" selected >BBA</option>
            <option value="BCA" selected >BCA</option>
          </select>
          <input name="page" value="index"  type="hidden">
          <input type="submit"  name="submit" value="submit" class="submit_btn5" style="bottom: 35px;">
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Download Source


popup


<html>
<head>
<title>Dheerendra Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/stylep.css" />
</head>
<body>

        <ul>
          <li><a id="modal_trigger" href="#modal" >Login</a></li>
        </ul>
   
      <div id="modal" class="popupContainer" style="display:none;">
        <header class="popupHeader"> <span class="header_title">Login</span> <span class="modal_close"><i class="fa fa-times"></i></span> </header>
        <section class="popupBody"> 
          <!-- Social Login -->
          <div class="social_login">
            <div class=""> <a href="https://www.facebook.com/dheerendra.verma.756" class="social_box fb" target="_new"> <span class="icon"><i class="fa fa-facebook"></i></span> <span class="icon_title">Connect with Facebook</span> </a> <a href="https://plus.google.com/u/0/111660188473602572063" class="social_box google"> <span class="icon"><i class="fa fa-google-plus"></i></span> <span class="icon_title">Connect with Google</span> </a> </div>
            <div class="centeredText"> <span>Or use your Email address</span> </div>
            <div class="action_btns">
              <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
              <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
            </div>
          </div>
          
          <!-- Username & Password Login form -->
          <div class="user_login">
            <form>
              <label>Email / Username</label>
              <input type="text" />
              <br />
              <label>Password</label>
              <input type="password" />
              <br />
              <div class="checkbox">
                <input id="remember" type="checkbox" />
                <label for="remember">Remember me on this computer</label>
              </div>
              <div class="action_btns">
                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                <div class="one_half last"><a href="http://dheerendraverma007.blogspot.in/" class="btn btn_red">Login</a></div>
              </div>
            </form>
            <a href="#" class="forgot_password">Forgot password?</a> </div>
          
          <!-- Register Form -->
          <div class="user_register">
            <form>
              <label>Full Name</label>
              <input type="text" />
              <br />
              <label>Email Address</label>
              <input type="email" />
              <br />
              <label>Password</label>
              <input type="password" />
              <br />
              <div class="checkbox">
                <input id="send_updates" type="checkbox" />
                <label for="send_updates">Send me occasional email updates</label>
              </div>
              <div class="action_btns">
                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                <div class="one_half last"><a href="http://dheerendraverma007.blogspot.in/" class="btn btn_red" target="_new">Register</a></div>
              </div>
            </form>
          </div>
        </section>
      </div>

      <script type="text/javascript">
$(function(){
  $('#loginform').submit(function(e){
    return false;
  });
  
  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script> 
      <script type="text/javascript">
$("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });

$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});

// Calling Register Form
$("#register_form").click(function(){
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});

// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});

})
</script> 

</body>
</html>


           Download Source