ChangeLog 2016-02-18.09:52
- The dialogs was made completly, Snippets of it is under.
- Together with the dialog comes an "X" button, Both the button and the dialog is only css, Not a single image.
Snippet for: Dialog Box.
HTML:
PHP Code:
<!--Login Box-->
<div class="dialog_340x200" id="login_box">
<div class="dialog_340x200_header">
<center>
<span style="top: 4px; left: 0; right: 0; margin: auto; position: absolute;">
<b>
Project. HTML
</b>
</span>
</center>
<div class="cross">x</div>
</div>
<div class="dialog_340x200_content">
</div>
</div>
JavaScript:
PHP Code:
$(document).ready(function ()
{
$('.dialog_340x200').draggable(
{
opacity: 0.35,
handle: '.dialog_340x200_header',
containment: "box"
});
});
CSS:
PHP Code:
.dialog_340x200
{
width: 340px;
height: 200px;
border: 1px rgb(0, 0, 0) solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
left: 0;
right: 0;
bottom: 0;
top: 0;
position: absolute;
margin: auto;
}
.dialog_340x200_header
{
width: 336px;
height: 32px;
border: 2px solid #367897;
background-color: #367897;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
color: white;
cursor: pointer;
}
.dialog_340x200_content
{
width: 340px;
height: 172px;
border: 1px solid black;
background-color: #E9E9E1;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
left: -1px;
right: 0;
bottom: 0;
top: 32px;
position: absolute;
margin: auto;
}
Features:
- Only able to drag inside the <body> tag.
- No images.
- Can only be dragged by the header.
- Easy to add another box.
Snippet for: Button
HTML:
PHP Code:
<div class="cross">x</div>
CSS:
PHP Code:
.cross
{
width: 17px;
height: 18px;
box-shadow: 0 0 0 1px black;
border: #DE4537 solid 1px;
background-image: linear-gradient(bottom, #91241A 50%, #BD3B2F 50%);
background-image: -o-linear-gradient(bottom, #91241A 50%, #BD3B2F 50%);
background-image: -moz-linear-gradient(bottom, #91241A 50%, #BD3B2F 50%);
background-image: -webkit-linear-gradient(bottom, #91241A 50%, #BD3B2F 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
color: rgb(255, 255, 255);
font-size: inherit;
font-weight: inherit;
font-family: Tahoma, Geneva, sans-serif;
font-style: inherit;
text-decoration: inherit;
text-align: center;
line-height: 1.15em;
letter-spacing: 0em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
right: 8px;
top: 4px;
position: absolute;
cursor: pointer;
}
.cross:hover
{
border: #B79491 solid 1px;
background-image: linear-gradient(bottom, #BC938F 50%, #8E7370 50%);
background-image: -o-linear-gradient(bottom, #BC938F 50%, #8E7370 50%);
background-image: -moz-linear-gradient(bottom, #BC938F 50%, #8E7370 50%);
background-image: -webkit-linear-gradient(bottom, #BC938F 50%, #8E7370 50%);
background-image: -ms-linear-gradient(bottom, #BC938F 50%, #8E7370 50%);
}
Features:
- Unable to drag the dialog by the cross.
- No images.
- Can only be added to the header.
- Easy to add another cross.
Originally Posted by The General
