Clean Dialog
How do I make an clean dialog?
This is a nice looking dialog with a frosty glass effect.I really like the combination of the background and box-shadow transitions on the close button especially.. What is a clean dialog? How do you make a clean dialog? This script and codes were developed by Sheodox on 26 December 2022, Monday.
Clean Dialog - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clean Dialog</title> <link href="//fonts.googleapis.com/css?family=Varela" rel="stylesheet" type="text/css" /> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="d" class="dialog"><section></section><section><h1>this is my header</h1><p>This is some test text and i think its going to look adsf dsfa fdsadfads asdf asf aa sd fassdf asf adsasda sda dsadfsadsfdsa adsf adsf adsf asdfadsf asdf adfadsf adf asfasdf asdfa sdfasdfasfasdfdas marvelousads fadsf asdfksljfasldkfjklsjdflkjsdaf</p><p>asdfadsfsdf</p><button>close</button></section></div>
<div style="background:white;margin: -230px 0 0 0;"> <p style="color:black;">siowurepioweurpoiuwqeproiuqwepori uqwpeo riuqpwoieru wqepior uqiwe riqow rpowqei ruowqi rueori uwqeoi ruqowieru owqie ruqpweoi rqweo ruqpweorupqowruoiqweiruqwepriouqweriouqpwoiruwqpoeiuqpwroui woieurqpoi ueoi qweoiruqwoeu oiqwue rpoiquw eri uwqpriwqu </p></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Clean Dialog - Script Codes CSS Codes
.dialog { opacity: 0.9; margin: 0 auto; width: 500px; height: 500px; position: relative; border: 1px solid #BBB;
}
.dialog > section { position:absolute; height:100%; width:100%;
}
.dialog > section:first-child { background: url("https://i.imgur.com/7iDqWjB.jpg") fixed; -webkit-filter: blur(5px);
}
.dialog > section:nth-child(2) { color:white; font-family: "Varela", sans-serif;
}
.dialog > section:nth-child(2) h1 { position:relative; top: 10px; text-align:center;
}
.dialog > section:nth-child(2) p { padding: 10px 10px 0 10px;
}
.dialog > section:nth-child(2) button { position:absolute; top: calc(100% - 60px); left: calc(50% - 40px); padding: 10px 15px; background: inherit; font-family: "Varela", sans-serif; color:white; border: 1px solid #BBB; font-size: 1.25em; transition:background 0.25s, box-shadow 0.5s;
}
.dialog > section:nth-child(2) button:hover { background: #888; box-shadow: inset 0 0 100px 10px #111;
}
body { background: url("https://i.imgur.com/7iDqWjB.jpg") fixed;
}
Clean Dialog - Script Codes JS Codes
$("#d").draggable();
Developer | Sheodox |
Username | sheodox |
Uploaded | December 26, 2022 |
Rating | 3 |
Size | 2,484 Kb |
Views | 8,096 |
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!
Name | Size |
Comic Sansify Bookmarklet | 2,293 Kb |
Angular todo list test | 1,664 Kb |
Text Highlighter | 2,562 Kb |
Click counter | 2,028 Kb |
WIP pulsing loading bar | 1,881 Kb |
Clean Expanding Tab Hover Navigation | 2,473 Kb |
Format time function | 1,546 Kb |
Windows-like Loading Bar | 2,110 Kb |
Youtube video time counter. | 1,797 Kb |
Cool squares. | 1,894 Kb |
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!
Name | Username | Size |
Pagepilling.js | Blossk | 6,554 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Website Concept | Sagoza | 3,104 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!