Modal

Developer
Panstable
Size
2,468 Kb
Views
54,648
  1. Modal Previews
  2. Modal HTML Codes
  3. Modal CSS Codes
  4. Modal JS Codes

How do I make an modal?

What is a modal? How do you make a modal? This script and codes were developed by Panstable on 11 August 2022, Thursday.

Modal Previews
IQ Test

Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mod-container"> <div class="sec-top"> <div class="success-icon"></div> <div class="mod-message"> <h4>İşlem Başarılı</h4> <p>Kaydınız alınmıştır.Bizi tercih ettiğiniz için teşekkür ederiz.</p> </div> </div> <div class="arrow"></div> <div class="sec-bottom"> <a href="#" class="start-button"> <span>Kapat</span> </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>

Modal - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.arrow {
background-position: 0 -39px;
width: 22px;
height: 11px;
position: absolute;
top: 0;
z-index: 30; margin-top:242px; margin-left:156px; background-image:url(http://s21.postimage.org/5ehccqppf/sprite.png);
}
body{background:black;font-family: 'Open Sans', sans-serif;}
h4{font-weight:300;font-size:16px !important;margin:8px 0 0 0;}
p{margin:10px 0 0 0;font-size:13px !important;}
body{background-color:#F1F1F1;
font-family: 'Open Sans', sans-serif; background:#2d3b36 url(http://www.inkspotcreative.com/wp-content/uploads/2013/07/blurred-background-8.jpg)no-repeat center center fixed;
}
.mod-container{ margin:100px auto 0 auto; width:330px; height:200px;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);border-radius:5px 5px 5px 5px;
}
.mod-container .sec-top{ background-color:#3aba6f; height:150px; width:330px; border-radius:5px 5px 0 0px;
}
.mod-container .sec-top .mod-message{ height:15px; width:330px; padding:0 auto 0 auto; color:white;
}
.mod-container .sec-top .mod-message h4{ font-size:13px; text-align:center;
}
.mod-container .sec-top .mod-message p{ font-size:12px; text-align:center;
}
.success-icon{ height:50px; width:330px; background:url("http://s23.postimage.org/j3u09gpl3/success.png") no-repeat 150px 15px transparent;
}
.mod-container .sec-bottom{ height:47px; width:330px; background-color:#FFF; border-radius:0 0px 4px 4px ; padding-top:23px;
}
a.start-button{
height: 29px;
width: 102px;
background-color: #3aba6f;
margin: 0 auto 0 auto;
border-radius: 4px;
display: block;
text-align: center;
font-weight: bold;
text-decoration: none;
padding-top: 3px;
}
.start-button span{ color:#FFF; font-size:12px;
}

Modal - Script Codes JS Codes

$('.start-button').click(function(){ $('.mod-container').fadeOut(250);
});
Modal - Script Codes
Modal - Script Codes
Home Page Home
Developer Panstable
Username panstable
Uploaded August 11, 2022
Rating 3
Size 2,468 Kb
Views 54,648
Do you need developer help for Modal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Panstable (panstable) Script Codes
Name
Counter
Admin Template
Pastel Color Code
Simple Slider - Carousel
Updated Reservation Interaction - Dribbble
A Pen by panstable
CSS3 Accordion Basic
Cool Buttons
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!