postman
New Coder
I show a modal here that is functioning and opens on click event with jquery, I am a beginner and tried the same function with animating modal opens with pure CSS code. but I could not achieve the goal. I read various threads and codepen, but in my case, I little confused about wherefrom I do start, every thread, different code which did not match to my modal-like method.
Please help to create the function when I click the button the modal will open from right to left with little animation with a modal backdrop.
HTML CODE
CSS Code
This is my full code on jsFiddle, https://jsfiddle.net/dqke35h0/
Please help to create the function when I click the button the modal will open from right to left with little animation with a modal backdrop.
HTML CODE
HTML:
<div class="ibs-full-modal-container" id="modal1">
<div class="ibs-full-modal">
<header class="ibs-modal-header">
<h4 class="ibs-modal-title">Default Modal</h4>
<span class="ibs-btn-close">×</span>
</header>
<div class="ibs-modal-body has-header has-footer"></div>
<div class="ibs-modal-footer text-right">
<button class="btn btn-default" id="closeBtn">Cancel</button>
<button class="btn btn-success">Confirm</button>
</div>
</div>
</div>
<button id="openBtn" class="btn btn-primary btn-lg">open modal</button>
CSS Code
CSS:
.ibs-backdrop,
.ibs-full-modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: none;
}
.ibs-full-modal-container {
background-color: transparent;
}
.ibs-full-modal {
position: absolute;
top: 0;
left: 240px;
right: 0;
bottom: 0;
-webkit-transform: translateX(30%);
-moz-transform: translateX(30%);
-ms-transform: translateX(30%);
-o-transform: translateX(30%);
transform: translateX(30%);
opacity: 0;
}
.ibs-full-modal * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ibs-full-modal > .ibs-modal-body,
.ibs-full-modal > .ibs-modal-footer,
.ibs-full-modal > .ibs-modal-header {
padding: 15px 20px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 56px;
background-color: #eee;
border-bottom: 1px solid #ccc;
}
.ibs-full-modal > .ibs-modal-body {
height: auto;
padding: 20px;
right: 0;
bottom: 0;
background-color: #fff;
overflow-x: hidden;
overflow-y: auto;
border: none;
}
.ibs-full-modal > .ibs-modal-body.has-header {
top: 56px;
}
.ibs-full-modal > .ibs-modal-body.has-footer {
bottom: 56px;
}
.ibs-full-modal > .ibs-modal-footer {
top: auto;
bottom: 0;
height: 56px;
text-align: right;
border-top: 1px solid #ccc;
padding: 10px 20px;
}
.ibs-full-modal .ibs-modal-title {
padding: 5px 0;
font-size: 18px;
font-weight: 700;
float: left;
}
.ibs-full-modal .ibs-btn-close {
font-size: 30px;
float: right;
line-height: 30px;
text-align: center;
height: 30px;
width: 30px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.ibs-full-modal .ibs-btn-close:hover {
background-color: #6495ed;
color: #fff;
cursor: pointer;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
html {
height: 100%;
}
body {
min-height: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
body.full-modal-open {
overflow: hidden;
}
This is my full code on jsFiddle, https://jsfiddle.net/dqke35h0/