สร้าง popup sign in ยังไงคะ?

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

Natcha_yds

สร้าง popup sign in ยังไงคะ?

โพสต์ที่ยังไม่ได้อ่าน โดย Natcha_yds »

อยากจะสร้าง popup เด้งขึ้นมาสวยๆ
รูปร่างแบบนี้ รูปภาพ ใช้การ Login ผ่าน FB กับ Email แบบนี้น่ะค่ะ
ต้องเขียนโค้ดยังไงบ้างคะ **เอาแค่เรื่องแบบฟอร์มเฉยๆอ่าคะ
ขอบคุณนะคะ
M031
PHP Hero Member
PHP Hero Member
โพสต์: 156
ลงทะเบียนเมื่อ: 20/11/2015 9:05 am

Re: สร้าง popup sign in ยังไงคะ?

โพสต์ที่ยังไม่ได้อ่าน โดย M031 »

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Login Facebook</title>
	<meta name="robots" content="nofollow" />
</head>
<style>
html,body{
	background: aliceblue;
}
div.con{
	width: 30%;
	height: auto;
	background: white;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	position: relative;
	box-shadow: 0px 1px 6px 1px rgba(50, 50, 50, 0.46);
}
div.con div.footer{
	position: relative;
	border-top: 1px #B3AEAE solid;
	background: whitesmoke;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	text-align: center;
	padding: 8px;
}
div.con div.ar{
	padding-top: 7px;
	padding-left: 13%;
	position: relative;
}
div.con div.arcen1{
	position: relative;
	width: 75%;
	height:50px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 4px;
	max-width: 100%;
	border: 1px #B1A4A4 solid;
	background: whitesmoke;
}
div.con div.arcen1 div.cen1{
	height: 50px;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	position: absolute;
	width: 22%;
	border-right: 1px #B1A4A4 solid;
}
div.con div.arcen1 div.cen1 div.con-cent1{
	position: relative;
	text-align: center;
	padding-top: 15px;
}
div.con div.arcen1 div.cen2{
	position: absolute;
	margin-left: 22%;
	padding: 14px;
	width: 69%;
}
div.con div.arcen2{
	background: whitesmoke;
	margin-top: 5%;
	margin-bottom: 5%;
	position: relative;
	width: 75%;
	height:50px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 4px;
	max-width: 100%;
	border: 1px rgba(50, 50, 50, 0.46) solid;
}
div.con div.arcen2 div.cen22{
	height: 50px;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	position: absolute;
	width: 22%;
	border-right: 1px #B1A4A4 solid;
}
div.con div.arcen2 div.cen22 div.con-cen22{
	position: relative;
	text-align: center;
	padding-top: 15px;
}
div.con div.arcen2 div.cen2{
	position: absolute;
	margin-left: 22%;
	padding: 14px;
	width: 69%;
}
</style>
<body>
	<div class="con">
		<div class="ar">
			<h1>Sign up for Pinterest</h1>
		</div>

		<div class="arcen1">
			<div class="cen1">
				<div class="con-cent1">
					FB
				</div>
			</div>
			<div class="cen2">
				Continue width Facebook
			</div>
		</div>

		<div class="arcen2">
			<div class="cen22">
				<div class="con-cen22">
					Mail
				</div>
			</div>
			<div class="cen2">
				Sign up with Email
			</div>
		</div>
		<div class="footer">
			<h2>Already have account ?</h2>
		</div>
	</div>
</body>
</html>
test.PNG
test.PNG (16.61 KiB) Viewed 1320 times
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 42