로그인 화면 - 오버레이

웹 페이지를 다시 디자인했으며 헤더의 로그인 양식을 없애고 싶습니다. 나는 'login'버튼으로 대체하고 싶습니다.이 버튼을 클릭하면 로그인 폼이 페이지의 오버레이에 표시됩니다.로그인 화면 - 오버레이

내가 수행 한 효과는이 사이트의 내용과 비슷합니다. http://www.teamtalk.com/ (상단 모서리 참조). 이 구현하기 까다로운가? 어떻게 그런 효과를 얻을 수 있을까요?

도움 주셔서 감사합니다.

출처

2012-03-09 Kelvin Farrell

jQuery를 사용하는 경우 jQuery Modal Dialog을 체크 아웃 할 수 있습니다. 어떤 경우에도 모델 대화 상자를 살펴보고 싶습니다.

출처

2012-03-09 01:20:49 Mayhem50

대단히 감사합니다. :) –

나는 이것을 함께 채찍질했다. 구현 방법을 이해하는 데 충분해야합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>Login popup</title> 
    <script type="text/javascript"> 
     function closeLogin() { 
      document.getElementById("container").removeChild(document.getElementById("overlay")); 
     } 
     function loginOverlay() { 
      var overlay = document.createElement("div"); 
      var loginForm = document.createElement("div"); 
      overlay.setAttribute("id", "overlay"); 
      overlay.style.position = "fixed"; 
      overlay.style.top = "0px"; 
      overlay.style.left = "0px"; 
      overlay.style.right = "0px"; 
      overlay.style.bottom = "0px"; 
      overlay.style.backgroundColor = "rgba(82,255,53,0.56)"; 
      loginForm.style.width = "500px"; 
      loginForm.style.marginTop = "100px"; 
      loginForm.style.marginLeft = "auto"; 
      loginForm.style.marginRight = "auto"; 
      loginForm.innerHTML = "<form> First name: <input type=\"text\" name=\"firstname\"/> <br/>Lastname: <input type=\"text\" name=\"lastname\"/></form><br/><a href='#c' onclick='closeLogin();'>close</a> "; 
      overlay.appendChild(loginForm); 
      document.getElementById("container").appendChild(overlay); 
     } 
    </script> 
</head> 
<body> 
<div id="container"><a href="#" onclick="loginOverlay()">Login</a></div> 
</body> 
</html>

출처

2012-03-09 01:34:59

로그인 화면 - 오버레이

답변

관련 문제