Simple Dialog

Developer
Jacob Poston
Size
2,504 Kb
Views
8,096
  1. Simple Dialog Previews
  2. Simple Dialog HTML Codes
  3. Simple Dialog CSS Codes

How do I make an simple dialog?

A single pop-up dialog style stolen from codeanywhere.com's "Create a New File" dialog.Just made for some practice because I loved the simple design. What is a simple dialog? How do you make a simple dialog? This script and codes were developed by Jacob Poston on 27 December 2022, Tuesday.

Simple Dialog Previews
IQ Test

Simple Dialog - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Dialog</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Shamlessly stolen from codeanywhere.com's "Create a New File" dialog. Just a pactice project for me to work on.-->
<div class="dialog"> <div class="dialog-header" id="clicker"> <h4 class="dialog-title"><span>Dialog Title</span></h4> <a class="dialog-close" href="#"></a> </div> <div class="dialog-body"> <label class="dialog-body-text">Input Text</label> <input type="text" class="dialog-body-input-text"></input> </div> <div class="dialog-footer"> <button type="button" class="dialog-okay">Okay</button> <button type="button" class="dialog-cancel">Cancel</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Simple Dialog - Script Codes CSS Codes

@-webkit-keyframes quick-shrink{ 0%{ transform: scale(1); } 100%{ transform: scale(0.95); }
}
@-webkit-keyframes quick-shrink{ 0%{ transform: scale(1); } 100%{ transform: scale(0.95); }
}
.dialog{ position: absolute; top: 40px; left: 60px; width: 400px; background-color: #322d29;
}
.dialog-header{ margin-bottom:-3px; padding:0; background-color: #615d54; width:100%; max-height: 36px; display:inline-block; border-botton: 1px solid #362e2b;
}
.dialog-body{ margin:0; padding:20px; background-color: #423a37; min-height: 30px;
}
.dialog-footer{ margin:0; padding:0; background-color: #423a37; min-height: 50px;
}
.dialog-cancel{ height:33px; width: 100px; background-color: #c92b32; border:0; color: #fffefb; font-size: 12px!important; font-family: Roboto,arial,sans-serif!important; font-weight: 300; float:right; margin-right: 10px;
}
.dialog-cancel:hover{ background-color: #a90b12;
}
.dialog-cancel:active{ -webkit-animation: quick-shrink .1s 0s 1 ease alternate;
}
.dialog-cancel:focus{ outline:none;
}
.dialog-okay{ height:33px; width: 100px; background-color: #4eb142; border:0; color: #fffefb; font-size: 12px!important; font-family: Roboto,arial,sans-serif!important; font-weight: 300; float:right; margin-right: 10px;
}
.dialog-okay:hover{ background-color: #1eb112;
}
.dialog-okay:active{ -webkit-animation: quick-shrink .1s 0s 1 ease alternate;
}
.dialog-okay:focus{ outline:none;
}
.dialog-title{ color: #fffefb; font-family: Roboto,arial,sans-serif!important; font-size: 13px; /*1em*/ font-weight: 300; /*display: inline-block;*/ float:left; margin-left: 10px; position: relative; top: 50%; transform: translateY(-50%);
}
.dialog-close{ height:36px; width:36px; float:right; display: inline; border-left: 1px solid #362e2b; background-color: #615d54; background: url("https://codeanywhere.com/editor/img/icons/dialogs/close.png") no-repeat center; background-size: 18px;
}
.dialog-body-text{ font-family: Roboto,arial,sans-serif; color: #d6d0c2; font-size: 12px;
}
.dialog-body-input-text{ width: 300px; height: 31px; background-color: #322d29; border:0!important; white-space: nowrap; overflow: hidden; padding-left: 12px; font-size: 12px; color: #827e75; font-family: Roboto, arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol', Symbola, EmojiSymbols !important; margin-top:12px;
}
.dialog-body-input-text:focus{ outline:none;
}
Simple Dialog - Script Codes
Simple Dialog - Script Codes
Home Page Home
Developer Jacob Poston
Username u1tralord
Uploaded December 27, 2022
Rating 3
Size 2,504 Kb
Views 8,096
Do you need developer help for Simple Dialog?

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!

Jacob Poston (u1tralord) Script Codes
Name
Github Repo Breakdown
Timeline
A Pen by Jacob Poston
Tasker Interfaces
Basic Jumbotron with Layers
Custom Input Form
Database Form
My First CSS Animation
Create amazing captions 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!