Advertisement
Guest User

Untitled

a guest
Mar 30th, 2017
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.97 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
  7. <title>Modal Login with jQuery Effects - Bootsnipp.com</title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  10. <style type="text/css">
  11. /* #####################################################################
  12. #
  13. # Project : Modal Login with jQuery Effects
  14. # Author : Rodrigo Amarante (rodrigockamarante)
  15. # Version : 1.0
  16. # Created : 07/28/2015
  17. # Last Change : 08/02/2015
  18. #
  19. ##################################################################### */
  20.  
  21. @import url(http://fonts.googleapis.com/css?family=Roboto);
  22.  
  23. * {
  24. font-family: 'Roboto', sans-serif;
  25. }
  26.  
  27. #login-modal .modal-dialog {
  28. width: 350px;
  29. }
  30.  
  31. #login-modal input[type=text], input[type=password] {
  32. margin-top: 10px;
  33. }
  34.  
  35. #div-login-msg,
  36. #div-lost-msg,
  37. #div-register-msg {
  38. border: 1px solid #dadfe1;
  39. height: 30px;
  40. line-height: 28px;
  41. transition: all ease-in-out 500ms;
  42. }
  43.  
  44. #div-login-msg.success,
  45. #div-lost-msg.success,
  46. #div-register-msg.success {
  47. border: 1px solid #68c3a3;
  48. background-color: #c8f7c5;
  49. }
  50.  
  51. #div-login-msg.error,
  52. #div-lost-msg.error,
  53. #div-register-msg.error {
  54. border: 1px solid #eb575b;
  55. background-color: #ffcad1;
  56. }
  57.  
  58. #icon-login-msg,
  59. #icon-lost-msg,
  60. #icon-register-msg {
  61. width: 30px;
  62. float: left;
  63. line-height: 28px;
  64. text-align: center;
  65. background-color: #dadfe1;
  66. margin-right: 5px;
  67. transition: all ease-in-out 500ms;
  68. }
  69.  
  70. #icon-login-msg.success,
  71. #icon-lost-msg.success,
  72. #icon-register-msg.success {
  73. background-color: #68c3a3 !important;
  74. }
  75.  
  76. #icon-login-msg.error,
  77. #icon-lost-msg.error,
  78. #icon-register-msg.error {
  79. background-color: #eb575b !important;
  80. }
  81.  
  82. #img_logo {
  83. max-height: 100px;
  84. max-width: 100px;
  85. }
  86.  
  87. /* #########################################
  88. # override the bootstrap configs #
  89. ######################################### */
  90.  
  91. .modal-backdrop.in {
  92. filter: alpha(opacity=50);
  93. opacity: .8;
  94. }
  95.  
  96. .modal-content {
  97. background-color: #ececec;
  98. border: 1px solid #bdc3c7;
  99. border-radius: 0px;
  100. outline: 0;
  101. }
  102.  
  103. .modal-header {
  104. min-height: 16.43px;
  105. padding: 15px 15px 15px 15px;
  106. border-bottom: 0px;
  107. }
  108.  
  109. .modal-body {
  110. position: relative;
  111. padding: 5px 15px 5px 15px;
  112. }
  113.  
  114. .modal-footer {
  115. padding: 15px 15px 15px 15px;
  116. text-align: left;
  117. border-top: 0px;
  118. }
  119.  
  120. .checkbox {
  121. margin-bottom: 0px;
  122. }
  123.  
  124. .btn {
  125. border-radius: 0px;
  126. }
  127.  
  128. .btn:focus,
  129. .btn:active:focus,
  130. .btn.active:focus,
  131. .btn.focus,
  132. .btn:active.focus,
  133. .btn.active.focus {
  134. outline: none;
  135. }
  136.  
  137. .btn-lg, .btn-group-lg>.btn {
  138. border-radius: 0px;
  139. }
  140.  
  141. .btn-link {
  142. padding: 5px 10px 0px 0px;
  143. color: #95a5a6;
  144. }
  145.  
  146. .btn-link:hover, .btn-link:focus {
  147. color: #2c3e50;
  148. text-decoration: none;
  149. }
  150.  
  151. .glyphicon {
  152. top: 0px;
  153. }
  154.  
  155. .form-control {
  156. border-radius: 0px;
  157. }
  158.  
  159. </style>
  160. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  161. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  162. </head>
  163. <body>
  164. <!-- BEGIN # BOOTSNIP INFO -->
  165. <div class="container">
  166. <div class="row">
  167. <h1 class="text-center">Modal Login with jQuery Effects</h1>
  168. <p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Open Login Modal</a></p>
  169. </div>
  170. </div>
  171. <!-- END # BOOTSNIP INFO -->
  172.  
  173. <!-- BEGIN # MODAL LOGIN -->
  174. <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  175. <div class="modal-dialog">
  176. <div class="modal-content">
  177. <div class="modal-header" align="center">
  178. <img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg">
  179. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  180. <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  181. </button>
  182. </div>
  183.  
  184. <!-- Begin # DIV Form -->
  185. <div id="div-forms">
  186.  
  187. <!-- Begin # Login Form -->
  188. <form id="login-form">
  189. <div class="modal-body">
  190. <div id="div-login-msg">
  191. <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
  192. <span id="text-login-msg">Type your username and password.</span>
  193. </div>
  194. <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
  195. <input id="login_password" class="form-control" type="password" placeholder="Password" required>
  196. <div class="checkbox">
  197. <label>
  198. <input type="checkbox"> Remember me
  199. </label>
  200. </div>
  201. </div>
  202. <div class="modal-footer">
  203. <div>
  204. <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
  205. </div>
  206. <div>
  207. <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
  208. <button id="login_register_btn" type="button" class="btn btn-link">Register</button>
  209. </div>
  210. </div>
  211. </form>
  212. <!-- End # Login Form -->
  213.  
  214. <!-- Begin | Lost Password Form -->
  215. <form id="lost-form" style="display:none;">
  216. <div class="modal-body">
  217. <div id="div-lost-msg">
  218. <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
  219. <span id="text-lost-msg">Type your e-mail.</span>
  220. </div>
  221. <input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
  222. </div>
  223. <div class="modal-footer">
  224. <div>
  225. <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
  226. </div>
  227. <div>
  228. <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
  229. <button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
  230. </div>
  231. </div>
  232. </form>
  233. <!-- End | Lost Password Form -->
  234.  
  235. <!-- Begin | Register Form -->
  236. <form id="register-form" style="display:none;">
  237. <div class="modal-body">
  238. <div id="div-register-msg">
  239. <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
  240. <span id="text-register-msg">Register an account.</span>
  241. </div>
  242. <input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
  243. <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
  244. <input id="register_password" class="form-control" type="password" placeholder="Password" required>
  245. </div>
  246. <div class="modal-footer">
  247. <div>
  248. <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
  249. </div>
  250. <div>
  251. <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
  252. <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
  253. </div>
  254. </div>
  255. </form>
  256. <!-- End | Register Form -->
  257.  
  258. </div>
  259. <!-- End # DIV Form -->
  260.  
  261. </div>
  262. </div>
  263. </div>
  264. <!-- END # MODAL LOGIN -->
  265. <script type="text/javascript">
  266. /* #####################################################################
  267. #
  268. # Project : Modal Login with jQuery Effects
  269. # Author : Rodrigo Amarante (rodrigockamarante)
  270. # Version : 1.0
  271. # Created : 07/29/2015
  272. # Last Change : 08/04/2015
  273. #
  274. ##################################################################### */
  275.  
  276. $(function() {
  277.  
  278. var $formLogin = $('#login-form');
  279. var $formLost = $('#lost-form');
  280. var $formRegister = $('#register-form');
  281. var $divForms = $('#div-forms');
  282. var $modalAnimateTime = 300;
  283. var $msgAnimateTime = 150;
  284. var $msgShowTime = 2000;
  285.  
  286. $("form").submit(function () {
  287. switch(this.id) {
  288. case "login-form":
  289. var $lg_username=$('#login_username').val();
  290. var $lg_password=$('#login_password').val();
  291. if ($lg_username == "ERROR") {
  292. msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
  293. } else {
  294. msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
  295. }
  296. return false;
  297. break;
  298. case "lost-form":
  299. var $ls_email=$('#lost_email').val();
  300. if ($ls_email == "ERROR") {
  301. msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
  302. } else {
  303. msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
  304. }
  305. return false;
  306. break;
  307. case "register-form":
  308. var $rg_username=$('#register_username').val();
  309. var $rg_email=$('#register_email').val();
  310. var $rg_password=$('#register_password').val();
  311. if ($rg_username == "ERROR") {
  312. msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
  313. } else {
  314. msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
  315. }
  316. return false;
  317. break;
  318. default:
  319. return false;
  320. }
  321. return false;
  322. });
  323.  
  324. $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
  325. $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
  326. $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
  327. $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
  328. $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
  329. $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
  330.  
  331. function modalAnimate ($oldForm, $newForm) {
  332. var $oldH = $oldForm.height();
  333. var $newH = $newForm.height();
  334. $divForms.css("height",$oldH);
  335. $oldForm.fadeToggle($modalAnimateTime, function(){
  336. $divForms.animate({height: $newH}, $modalAnimateTime, function(){
  337. $newForm.fadeToggle($modalAnimateTime);
  338. });
  339. });
  340. }
  341.  
  342. function msgFade ($msgId, $msgText) {
  343. $msgId.fadeOut($msgAnimateTime, function() {
  344. $(this).text($msgText).fadeIn($msgAnimateTime);
  345. });
  346. }
  347.  
  348. function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
  349. var $msgOld = $divTag.text();
  350. msgFade($textTag, $msgText);
  351. $divTag.addClass($divClass);
  352. $iconTag.removeClass("glyphicon-chevron-right");
  353. $iconTag.addClass($iconClass + " " + $divClass);
  354. setTimeout(function() {
  355. msgFade($textTag, $msgOld);
  356. $divTag.removeClass($divClass);
  357. $iconTag.addClass("glyphicon-chevron-right");
  358. $iconTag.removeClass($iconClass + " " + $divClass);
  359. }, $msgShowTime);
  360. }
  361. });
  362. </script>
  363. </body>
  364. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement