JAVASCRIPT USING POPUP
What is Popup?
Popup
is GUI Component GUI-> Graphical User Interface .Your Website Window
suddenly Visible to the Foreground to user ex search
The any
website through internet suddenly appears to your foreground
Contact
or Register form
Open
Your IDE
Write
Your Coding and then Open your web browser
Run the
html file
<html>
<head>
<style>
#main{
background-color:#A9A9A9;
height:100%;
width:100%;
position:relative;
}
#sub{
background-color:#F0FFFF;
height:10%;
width:20%;
display:none;
}
.spn{
font-size:25px;
float:right;
opacity:0.5;
}
.spn:hover{
cursor:
pointer;
}
.fm {
padding-top: 13%;
padding-left: 39%;
}
.fa-soundcloud {
color: #e8822d;
}
.fa-soundcloud:hover,
.fa-soundcloud:focus {
text-decoration: none;
color: #cc6916;
}
.fa-pinterest {
color: #bd091f;
}
.fa-pinterest:hover,
.fa-pinterest:focus {
text-decoration: none;
color: #8c0717;
}
.fa-vimeo {
color: #17b3e8;
}
.fa-vimeo:hover,
.fa-vimeo:focus {
text-decoration: none;
color: #128fba;
}
.fa-behance {
color: #2c98cf;
}
.fa-behance:hover,
.fa-behance:focus {
text-decoration: none;
color: #2379a5;
}
.fa-codepen {
color: #1c1c1c;
}
.fa-codepen:hover,
.fa-codepen:focus {
text-decoration: none;
color: #020202;
}
.fa-foursquare {
color: #fa4778;
}
.fa-foursquare:hover,
.fa-foursquare:focus {
text-decoration: none;
color: #f91554;
}
.fa-facebook {
color: #4b6daa;
}
.fa-facebook:hover,
.fa-facebook:focus {
text-decoration: none;
color: #3b5687;
}
.fa-angellist {
color: #000000;
}
.fa-angellist:hover,
.fa-angellist:focus {
text-decoration: none;
color: #000000;
}
.fa-bitbucket {
color: #205081;
}
.fa-bitbucket:hover,
.fa-bitbucket:focus {
text-decoration: none;
color: #163758;
}
.fa-google-plus {
color: #bf2a1d;
}
.fa {
color: #0594f3;
}
.fa-google-plus:hover,
.fa-google-plus:focus {
text-decoration: none;
color: #932016;
}
.background-card h4 {
font-variant: small-caps;
color: #777777;
border-bottom: 1px solid #eeeeee;
padding-bottom: 1em;
margin-bottom: 1em;
line-height: 1.2;
}
.background-card h4:not(:first-child) {
margin-top: 2em;
}
h4 > .fa,
h4 > .title {
display: inline-block;
vertical-align: baseline;
color: #000000c7;
font-weight: 600;
}
h4 > .fa {
width: 4rem;
}
.content {
line-height: 1.5;
}
.card {
background: #ffffff;
border: 1px solid #e6e6e6;
border-radius: 3px;
padding: 2em 3.5em;
box-shadow: 0px 3px 20px -10px;
}
.card-nested {
padding: 1.5rem 0 1.5rem 4.2rem;
}
.card-wrapper {
padding: 5px;
}
</style>
<script>
function sd(){
var inp=document.getElementById('nm').value;
document.getElementById('pa').innerHTML=inp;
document.getElementById('nm').value="";
document.getElementById('sub').setAttribute("style","display:block;position:absolute;top:15px;left:55px;opacity:0.3;transition:display
5s;");
}
function cls(){
document.getElementById('sub').style.display="none";
}
</script>
</head>
<body>
<div id="main">
<div class="fm">
name<input type="text" required
id="nm"><br>
<button onclick="sd();"
id="snd">send</button>
</div>
<div
id="sub">
<span
onclick="cls();" class="spn">×</span>
<p
id="pa"> Mail send
success fullly</p>
</div>
</div>
</body>
</html>
I was surfing the Internet for information and came across your blog. I am impressed by the information you have on this blog. It shows how well you understand this subject. Finance 代写
ReplyDelete