อยากจะสร้าง popup เด้งขึ้นมาสวยๆ
รูปร่างแบบนี้ ใช้การ Login ผ่าน FB กับ Email แบบนี้น่ะค่ะ
ต้องเขียนโค้ดยังไงบ้างคะ **เอาแค่เรื่องแบบฟอร์มเฉยๆอ่าคะ
ขอบคุณนะคะ
สร้าง popup sign in ยังไงคะ?
Moderator: mindphp
-
- PHP Hero Member
- โพสต์: 156
- ลงทะเบียนเมื่อ: 20/11/2015 9:05 am
Re: สร้าง popup sign in ยังไงคะ?
โค้ด: เลือกทั้งหมด
<!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>
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ POPUP ANYWHERE PLUGIN Extension เสริมช่วยในการแสดง Popup ในหน้าเว็บของเรา
โดย mcmakdonal » 13/07/2015 10:43 am » ใน Joomla Extension Review - 0 ตอบกลับ
- 2889 แสดง
-
โพสต์ล่าสุด โดย mcmakdonal
13/07/2015 10:43 am
-
-
- 2 ตอบกลับ
- 1203 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
26/07/2019 6:15 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 66