Pages

Tuesday, March 20, 2018

How to create a Modal div for a website


Source Code for Modal by Computer Master!!

Demo:






<!Doctype html>
<html>
<title> Powered by Computer Master </title>
<style>
  *{
margin:0px;
padding:0px;
}

#cm-modal{
width:50%;
height:200px;
margin:20px auto;
border-radius:5px;
box-shadow:0px 0px 10px #888888;
overflow:hidden;
position:relative;
  }
</style>

<body>

<div id="cm-modal">

  <h2 style="background:#405570; color:white; text-align:center; padding:1%; ">
  I am the Modal!!
  </h2>

  <p style="padding:1%; ">
  This is a simple paragraph in the modal.
  </p>

  <span style="position:absolute; bottom:0px; background:#405570;
       color:white; width:98%; padding:1%; text-align:center; ">
  Footer of the modal
  </span>

</div>

</body>

</html>

No comments:

Post a Comment