POP UP | ALERT MESSAGE

|| POP UP MESSAGE BOX || ALERT MESSAGE BOX || CODE BY CODOBLOG ||

codoblog giving the code for designing the code for POP UP message Box. This box also helpfull for giving the message of alerting also. Design it and use properly in your websites. This pop up message is so helpful for the alerting users during interacting with our web.

So, try to do the code for it, and keep connected with the codoblog.

#CODE -

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Pop up</title>

<link rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

<style type="text/css">

h3{

font-family: lucida Handwriting;

text-align: center;

}

</style>

</head>

<body>

<script type="text/javascript">

swal("welcome","to my channel","success")

.then((value)=>{

swal("Enter your name:",{

content:"input",

})

.then((value)=>{

swal("Love CodoBlog",`${value}..! Please subscribe CodoBlog`,)

})

</script>

<br>

<h3>Welcome to the HomePage..!</h3>

</body>

</html>

#OUTPUT

This are the outputs.

Stay always connected with us...

#Keep Loving CodoBlog

Subscribe our YOUTUBE Channel --:: https://www.youtube.com/channel/UCkgYqlsFvu7Tq-W2n8aQwtg

Watch this videos also...

Comments

The Most Populer

Sidebar Icon | The Icon Interaction

Sidebar icon with animation || Icon interaction HTML Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE : <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE - <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/> <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...

Javascript FireCracker Animation

|| FireCracker Animation Using JavaScript || #CODE : <!DOCTYPE html> <html> <head> <title>JavaScript FireDesign</title> <style type="text/css"> body{ background: #000; margin: 0; width: 100%; overflow: hidden; } </style> </head> <body> <canvas></canvas> <script type="text/javascript"> var t =0; var c = document.querySelector("canvas"); var $ = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; $.fillStyle = 'hsla(0,0%,0%,1)'; window.addEventListener('resize',function(){ c.width = window.innerWidth; c.height= window.innerHeight; },fa...

Search This Blog