API tools faq
paste
Advertisement
Guest User

leanModal

a guest
Feb 12th, 2019
173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.06 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5.         font-family: 'Source Sans Pro', sans-serif;
  6.         font-size: 14px;
  7.         color: #666;
  8. }
  9.  
  10. h1 {
  11.         text-align: center;
  12.         margin-bottom: 0;
  13.         margin-top: 60px;
  14. }
  15.  
  16. #lean_overlay {
  17.         position: fixed;
  18.         z-index: 100;
  19.         top: 0px;
  20.         left: 0px;
  21.         height: 100%;
  22.         width: 100%;
  23.         background: #000;
  24.         display: none;
  25. }
  26.  
  27. .popupContainer {
  28.         position: absolute;
  29.         width: 330px;
  30.         height: auto;
  31.         left: 45%;
  32.         top: 60px;
  33.         background: #FFF;
  34. }
  35.  
  36. #modal_trigger {
  37.         margin: 40px auto;
  38.         width: 200px;
  39.         display: block;
  40.         border: 1px solid #DDD;
  41.         border-radius: 4px;
  42. }
  43.  
  44. .btn {
  45.         padding: 10px 20px;
  46.         background: #F4F4F2;
  47. }
  48.  
  49. .btn_red {
  50.         background: #ED6347;
  51.         color: #FFF;
  52. }
  53.  
  54. .btn:hover {
  55.         background: #E4E4E2;
  56. }
  57.  
  58. .btn_red:hover {
  59.         background: #C12B05;
  60. }
  61.  
  62. a.btn {
  63.         color: #666;
  64.         text-align: center;
  65.         text-decoration: none;
  66. }
  67.  
  68. a.btn_red {
  69.         color: #FFF;
  70. }
  71.  
  72. .one_half {
  73.         width: 50%;
  74.         display: block;
  75.         float: left;
  76. }
  77.  
  78. .one_half.last {
  79.         width: 45%;
  80.         margin-left: 5%;
  81. }
  82. /* Popup Styles*/
  83.  
  84. .popupHeader {
  85.         font-size: 16px;
  86.         text-transform: uppercase;
  87. }
  88.  
  89. .popupHeader {
  90.         background: #F4F4F2;
  91.         position: relative;
  92.         padding: 10px 20px;
  93.         border-bottom: 1px solid #DDD;
  94.         font-weight: bold;
  95. }
  96.  
  97. .popupHeader .modal_close {
  98.         position: absolute;
  99.         right: 0;
  100.         top: 0;
  101.         padding: 10px 15px;
  102.         background: #E4E4E2;
  103.         cursor: pointer;
  104.         color: #aaa;
  105.         font-size: 16px;
  106. }
  107.  
  108. .popupBody {
  109.         padding: 20px;
  110. }
  111. /* Social Login Form */
  112.  
  113. .social_login {}
  114.  
  115. .social_login .social_box {
  116.         display: block;
  117.         clear: both;
  118.         padding: 10px;
  119.         margin-bottom: 10px;
  120.         background: #F4F4F2;
  121.         overflow: hidden;
  122. }
  123.  
  124. .social_login .icon {
  125.         display: block;
  126.         width: 10px;
  127.         padding: 5px 10px;
  128.         margin-right: 10px;
  129.         float: left;
  130.         color: #FFF;
  131.         font-size: 16px;
  132.         text-align: center;
  133. }
  134.  
  135. .social_login .fb .icon {
  136.         background: #3B5998;
  137. }
  138.  
  139. .social_login .google .icon {
  140.         background: #DD4B39;
  141. }
  142.  
  143. .social_login .icon_title {
  144.         display: block;
  145.         padding: 5px 0;
  146.         float: left;
  147.         font-weight: bold;
  148.         font-size: 16px;
  149.         color: #777;
  150. }
  151.  
  152. .social_login .social_box:hover {
  153.         background: #E4E4E2;
  154. }
  155.  
  156. .centeredText {
  157.         text-align: center;
  158.         margin: 20px 0;
  159.         clear: both;
  160.         overflow: hidden;
  161.         text-transform: uppercase;
  162. }
  163.  
  164. .action_btns {
  165.         clear: both;
  166.         overflow: hidden;
  167. }
  168.  
  169. .action_btns a {
  170.         display: block;
  171. }
  172. /* User Login Form */
  173.  
  174. .user_login {
  175.         display: none;
  176. }
  177.  
  178. .user_login label {
  179.         display: block;
  180.         margin-bottom: 5px;
  181. }
  182.  
  183. .user_login input[type="text"],
  184. .user_login input[type="email"],
  185. .user_login input[type="password"] {
  186.         display: block;
  187.         width: 90%;
  188.         padding: 10px;
  189.         border: 1px solid #DDD;
  190.         color: #666;
  191. }
  192.  
  193. .user_login input[type="checkbox"] {
  194.         float: left;
  195.         margin-right: 5px;
  196. }
  197.  
  198. .user_login input[type="checkbox"]+label {
  199.         float: left;
  200. }
  201.  
  202. .user_login .checkbox {
  203.         margin-bottom: 10px;
  204.         clear: both;
  205.         overflow: hidden;
  206. }
  207.  
  208. .forgot_password {
  209.         display: block;
  210.         margin: 20px 0 10px;
  211.         clear: both;
  212.         overflow: hidden;
  213.         text-decoration: none;
  214.         color: #ED6347;
  215. }
  216. /* User Register Form */
  217.  
  218. .user_register {
  219.         display: none;
  220. }
  221.  
  222. .user_register label {
  223.         display: block;
  224.         margin-bottom: 5px;
  225. }
  226.  
  227. .user_register input[type="text"],
  228. .user_register input[type="email"],
  229. .user_register input[type="password"] {
  230.         display: block;
  231.         width: 90%;
  232.         padding: 10px;
  233.         border: 1px solid #DDD;
  234.         color: #666;
  235. }
  236.  
  237. .user_register input[type="checkbox"] {
  238.         float: left;
  239.         margin-right: 5px;
  240. }
  241.  
  242. .user_register input[type="checkbox"]+label {
  243.         float: left;
  244. }
  245.  
  246. .user_register .checkbox {
  247.         margin-bottom: 10px;
  248.         clear: both;
  249.         overflow: hidden;
  250. }
  251. </style>
  252. </head>
  253. <body>
  254. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  255. <script src="jquery.leanModal.min.js"></script>
  256. <div class="container">
  257.         <h1>Popup Login & Signup with jQuery</h1>
  258.        <a id="modal_trigger" href="#modal" class="btn">Click here to Login or register</a>
  259.        <div id="modal" class="popupContainer" style="display:none;">
  260.                 <header class="popupHeader">
  261.                         <span class="header_title">Login</span>
  262.                         <span class="modal_close"><i class="fa fa-times"></i></span>
  263.                 </header>
  264.                 <section class="popupBody">
  265.                         <!-- Social Login -->
  266.                         <div class="social_login">
  267.                                 <div class="">
  268.                                         <a href="#" class="social_box fb">
  269.                                                 <span class="icon"><i class="fa fa-facebook"></i></span>
  270.                                                 <span class="icon_title">Connect with Facebook</span>
  271.                                         </a>
  272.                                         <a href="#" class="social_box google">
  273.                                                 <span class="icon"><i class="fa fa-google-plus"></i></span>
  274.                                                 <span class="icon_title">Connect with Google</span>
  275.                                         </a>
  276.                                 </div>
  277.                                 <div class="centeredText">
  278.                                         <span>Or use your Email address</span>
  279.                                 </div>
  280.                                 <div class="action_btns">
  281.                                         <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
  282.                                         <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
  283.                                 </div>
  284.                         </div>
  285.                         <!-- Username & Password Login form -->
  286.                         <div class="user_login">
  287.                                 <form>
  288.                                         <label>Email / Username</label>
  289.                                         <input type="text" />
  290.                                         <br />
  291.  
  292.                                         <label>Password</label>
  293.                                         <input type="password" />
  294.                                         <br />
  295.  
  296.                                         <div class="checkbox">
  297.                                                 <input id="remember" type="checkbox" />
  298.                                                 <label for="remember">Remember me on this computer</label>
  299.                                         </div>
  300.  
  301.                                         <div class="action_btns">
  302.                                                 <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
  303.                                                 <div class="one_half last"><a href="#" class="btn btn_red">Login</a></div>
  304.                                         </div>
  305.                                 </form>
  306.  
  307.                                 <a href="#" class="forgot_password">Forgot password?</a>
  308.                         </div>
  309.                         <!-- Register Form -->
  310.                         <div class="user_register">
  311.                                 <form>
  312.                                         <label>Full Name</label>
  313.                                         <input type="text" />
  314.                                         <br />
  315.  
  316.                                         <label>Email Address</label>
  317.                                         <input type="email" />
  318.                                         <br />
  319.  
  320.                                         <label>Password</label>
  321.                                         <input type="password" />
  322.                                         <br />
  323.  
  324.                                         <div class="checkbox">
  325.                                                 <input id="send_updates" type="checkbox" />
  326.                                                 <label for="send_updates">Send me occasional email updates</label>
  327.                                         </div>
  328.  
  329.                                         <div class="action_btns">
  330.                                                 <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
  331.                                                 <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div>
  332.                                         </div>
  333.                                 </form>
  334.                         </div>
  335.                 </section>
  336.         </div>
  337. </div>
  338. <script>
  339. // Plugin options and our code
  340. $("#modal_trigger").leanModal({
  341.         top: 100,
  342.         overlay: 0.6,
  343.         closeButton: ".modal_close"
  344. });
  345.  
  346. $(function() {
  347.         // Calling Login Form
  348.         $("#login_form").click(function() {
  349.                 $(".social_login").hide();
  350.                 $(".user_login").show();
  351.                 return false;
  352.         });
  353.  
  354.         // Calling Register Form
  355.         $("#register_form").click(function() {
  356.                 $(".social_login").hide();
  357.                 $(".user_register").show();
  358.                 $(".header_title").text('Register');
  359.                 return false;
  360.         });
  361.  
  362.         // Going back to Social Forms
  363.         $(".back_btn").click(function() {
  364.                 $(".user_login").hide();
  365.                 $(".user_register").hide();
  366.                 $(".social_login").show();
  367.                 $(".header_title").text('Login');
  368.                 return false;
  369.         });
  370. });</script>
  371. </body>
  372. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!