Full Page Modal Full Page About Me
icon-search
Full Page Modal   Full Page About Me

Full Page Modal Full Page About Me

Full Page Modal   Full Page About Me

Have you ever seen full page modal Windows or modal popups on any website I think yes because modal popups are one of the main thing that are used to make site interactive and beautiful and to give some information.

Here in today's post I will provide you a source code of full page modal window.


How are you programmers today we are going to build Full Page Modal Full Page About Me. As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Full Page Modal - Full Page About Me</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content_of_page">
<h1 class="blured_text">Are we indeed?</h1>
<h2 class="blured_text">"We indeed!" cried the Mouse, who was trembling down to the end of his
Tail. "As if I would talk on such a subject! Our family always HATED
Cats: nasty, low, vulgar things! Don"t let me hear the name again!"</h2>
<p class="blured_text">"I won"t indeed!" said Alice, in a great hurry to change the subject of
Conversation. "Are you—are you fond—of—of dogs?" The Mouse did not
Answer, so Alice went on eagerly: "There is such a nice little dog near
Our house I should like to show you! A little bright-eyed terrier, you
Know, with oh, such long curly brown hair! And it"ll fetch things when
You throw them, and it"ll sit up and beg for its dinner, and all sorts
Of things—I can"t remember half of them—and it belongs to a farmer,
You know, and he says it"s so useful, it"s worth a hundred pounds! He
Says it kills all the rats and—oh dear!" cried Alice in a sorrowful
Tone, "I"m afraid I"ve offended it again!" For the Mouse was swimming
Away from her as hard as it could go, and making quite a commotion in
The pool as it went.</p>
</div>
<div id="modal">
<div id="modal_content">
<h1>A Full screen modal on load, is generally considered a bad UX practice.<h1>
<h2>but is it always a bad idea?</h2>
<a href="#" title="Close">✖</a>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
Src="js/index.js"></script>
</body>
</html>


Text used in this model is like a dummy you can change the text video on text.


Without CSS our this script (Full Page Modal Full Page About Me) will never look classy. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As css/style.css :

@import url("https://fonts.googleapis.com/css?family=Open+Sans:600,800");
*{
Box-sizing:border-box;
}
Html,body {
  height:100%;
}
Body {
  background:#ededed;
  font-family:"Open sans";
  color:#333;
  overflow:hidden;
}
H1 {
  text-transform:uppercase;
}
H1,h2 {
  text-align:center;
  margin:20px auto;
  text-shadow: 1px 1px 0px #fff;
}
Div#content_of_page {
  padding:20px 100px;
}
.blured_text  {
  text-shadow:0px 0px 8px #000;
  color:transparent;
}
Div#modal {
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,103,138,0.9);
  color:white;
  padding:50px 100px;
}
Div#modal_content {
  position:absolute;
  width:550px;
  left:50%;
  top:50%;
  margin:-130px -275px;
}
Div#modal h1, div#modal h2 {
  
  text-shadow: 1px 1px 0px #000;
}
Div#modal a {
  color:white;
  display:block;
  margin:auto;
  width:50px;
  height:50px;
  line-height:35px;
  text-align:center;
  text-decoration:none;
  font-size:2em;
  padding:5px;
  border:2px solid white;
  border-radius:50%;
  text-shadow: 0 0 5px #333;
  box-shadow:0 0 2px #333;
}
Div#modal a:hover {
  color:#333;
  border:2px solid #333;
}


Heavy have written number CSS style code.

Here I am having an offer for you if you don't know you don't have any knowledge about cascading style sheets or CSS you should subscribe to the newsletters of this blog because you will find all that stuff here.


Have you ever seen full page modal Windows or modal popups on any website I think yes because modal popups are one of the main thing that are used to make site interactive and beautiful and to give some information.

Here in today's post I will provide you a source code of full page modal window.


How are you programmers today we are going to build Full Page Modal Full Page About Me. As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As js/index.js :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Full Page Modal - Full Page About Me</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content_of_page">
<h1 class="blured_text">Are we indeed?</h1>
<h2 class="blured_text">"We indeed!" cried the Mouse, who was trembling down to the end of his
Tail. "As if I would talk on such a subject! Our family always HATED
Cats: nasty, low, vulgar things! Don"t let me hear the name again!"</h2>
<p class="blured_text">"I won"t indeed!" said Alice, in a great hurry to change the subject of
Conversation. "Are you—are you fond—of—of dogs?" The Mouse did not
Answer, so Alice went on eagerly: "There is such a nice little dog near
Our house I should like to show you! A little bright-eyed terrier, you
Know, with oh, such long curly brown hair! And it"ll fetch things when
You throw them, and it"ll sit up and beg for its dinner, and all sorts
Of things—I can"t remember half of them—and it belongs to a farmer,
You know, and he says it"s so useful, it"s worth a hundred pounds! He
Says it kills all the rats and—oh dear!" cried Alice in a sorrowful
Tone, "I"m afraid I"ve offended it again!" For the Mouse was swimming
Away from her as hard as it could go, and making quite a commotion in
The pool as it went.</p>
</div>
<div id="modal">
<div id="modal_content">
<h1>A Full screen modal on load, is generally considered a bad UX practice.<h1>
<h2>but is it always a bad idea?</h2>
<a href="#" title="Close">✖</a>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
Src="js/index.js"></script>
</body>
</html>


Text used in this model is like a dummy you can change the text video on text.




Result :

So here we are, We have done and our project Full Page Modal Full Page About Me is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Full Page Modal Full Page About Me
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Full Page Modal Full Page About Me) File :

Full Page Modal Full Page About Me.zip
File Size 2.24 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.



Thank you !

Disqus Codes

No comments

Notifications

Disqus Logo