JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!-- Modal content -->
  <div class="modal-content">    
    <span class="close-btn">&times;</span>
    <p>Thanks for visiting Atoms from %Country%. We are currently open for business in United States only. We could love to inform you when we expand to %Country%.</p>
    <form class="form-inline" action="">      
       <div>             
       <input type="text" name="email" placeholder="Email" class="frm-element">
       <input type="text" name="name" placeholder="Name" class="frm-element">
       <div class="radios"> 
       <label class="checkcontainer">
          <input type="radio" name="gender" value="Man" class="radiobtn"> Man
          <span class="radiobtn"></span>
       </label>
       <label class="checkcontainer" style="margin-left:15px">
          <input type="radio" name="gender" value="Woman" style="margin-left:20px" class="radiobtn"> Woman
          <span class="radiobtn"></span>
       </label>   
       </div>
       <span class="error-msg"></span>
       <span class="success-msg"></span>
       </div>
       <div class="d-submit">
       <input type="submit" name="submit" class="submit-btn" value="Sign Up">
       </div>       
    </form>
</div>

SCSS

#modalOpenBtn {
    font-family: "F_Grotesk", "Arial";
    font-size: 14px;
    font-weight: 400;
    padding-bottom:10px;

}

#frnModal {
   
  display: none;
  position: fixed;
  z-index: 999999999999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 20px;


.modal h2 {
  margin: 5px 0px;
  font-weight: 300;
}

.modal-header {
  padding: 2px 16px;
  background-color: #333;
  color: white;
}

.modal-body { padding: 2px 16px; }

.modal-footer {
  padding: 2px 16px;
  background-color: #ddd;
  color: white;
}


.form-inline {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  outline: 0;
  padding: 0;
  width: 100%;    
}

.submit-btn {
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  background-image: none;
  border: 2px solid #000;
  border-radius: 26px;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin: 0;
  outline: 0;
  padding: 9px 0;
  text-align: center;
  text-decoration: none;
  transition-delay: 0s,0s;
  transition-duration: 0.3s, 0.3s;
  transition-property: background,color;
  transition-timing-function: ease,ease;
  vertical-align: middle;
  width: 150px;
}

.frm-element {
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  background-image: none;
  border-bottom: 1px solid #000 !important;
  border-radius: 0;
  border-width: 0;
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;  
  outline: 0;
  padding: 0 0 5px;
  vertical-align: baseline;
  width: 400px;
  margin: 10px 0;
}

.submit-btn:hover {
  background-color: #000;
  color: #fff;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 30px;
  border: 1px solid #888;
  border-radius: 0px;
 ...

JavaScript

// Get the modal
var modal = document.getElementById('frnModal');

// Get the button that opens the modal
var btnModal = document.getElementById("modalOpenBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-btn")[0];

// When the user clicks the button, open the modal 
btnModal.onclick = function(event) {
  event.preventDefault();
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}