html css modal-dialog css-animations simplemodal

Open Modal with pure CSS coding

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

<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">&times;</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

.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/

Solution

UPDATES: added animation effect.

Like an option, if you have to open modal without JS - you can take a look on this approach.

Instead of button, you can use checkbox with labels, which will be like an anchor for toggling modal.

See comments in CSS and HTML for more details.

/* register global css variables */
:root {
  --modal-spacing: 1rem;
  --modal-anim-duration: .3s;
}

body {
  margin: 0;
}

/* this will hide checkbox */
.modal-toggle-checkbox {
  appearance: none;
}

/* if checkbox is checked, show modal container */
.modal-toggle-checkbox:checked + .ibs-full-modal-container {
  visibility: visible;
  background-color: rgba(0, 0, 0, .5);
}

/* 
  show modal content 
  update this part to add animations  
*/
.modal-toggle-checkbox:checked + .ibs-full-modal-container .ibs-full-modal {
  opacity: 1;
  transform: translateX(0);
}

/* temporary code. seems like you using BS or something, so this up to you */
.section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.container {
  max-width: 1400px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.modal-toggle-label {
  display: inline-flex;
  border: 1px solid;
  padding: .25rem;
  border-radius: .25rem;
  cursor: pointer;
}
/* end of temporary code */

/* .ibs-backdrop not used here, can be removed */
/*.ibs-backdrop,*/
.ibs-full-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* make modal container full-screen size */
  height: 100vh; /* make modal container full-screen size */
  z-index: 1;
  background-color: transparent;
  visibility: hidden; /* animating container visibility */
  transition: visibility calc(var(--modal-anim-duration) + .05s) ease, background-color var(--modal-anim-duration) ease; /* animating container visibility and background */
}

/*.ibs-full-modal-container {
  background-color: transparent;
}*/

.ibs-full-modal {
  position: absolute;
  top: var(--modal-spacing);
  left: var(--modal-spacing);
  height: calc(100% - var(--modal-spacing) * 2);
  width: calc(100% - var(--modal-spacing) * 2);
  /*-webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  -o-transform: translateX(30%);*/
  transform: translateX(30%);
  opacity: 0; /* animating modal visibility with position */
  transition: opacity var(--modal-anim-duration) ease, transform var(--modal-anim-duration) ease; /* animating modal visibility with position */
} 

.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;
}

<section class="section">
  <div class="container">
    <!-- 
      create label for checkbox, which will toggle checkbox state;
    -->
    <label class="btn btn-primary btn-lg modal-toggle-label" for="openModal">open modal</label>
  </div>
</section>

<div class="modal-toggle-wrapper">
  <!-- 
    checkbox itself, for toggling modal window;
    this checkbox node should be above target modal
  -->
  <input class="modal-toggle-checkbox" type="checkbox" id="openModal">
  <!-- id="modal1" can be removed -->
  <div class="ibs-full-modal-container">
    <div class="ibs-full-modal">
      <header class="ibs-modal-header">
        <h4 class="ibs-modal-title">Default Modal</h4>

        <!-- label for checkbox, which will toggle checkbox state (closing modal) -->
        <label for="openModal">
          <span class="ibs-btn-close">&times;</span>
        </label>

      </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>
</div>