Alert Number Modal

alert-number-modal.markdown

Alert Number Modal

A Pen by Think on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="modal-main">
  <div class="icon-alert">iconAlert</div>
  <h3>เบอร์นี้มีผู้ใช้มากกว่าหนึ่งคน</h3>
  <div class="text-notice">กรุณาเลือก BAN ที่ต้องการทำรายการชำระ</div>
  <div class="mobile-List">
    
    <div class="number-list active open" id="list_1">
      <div class="mobile-radio">
      <label class="set--checkbox">
  <input type="radio" name="radio_text" checked="checked" onClick="selectList(1);" />
  <div class="set-radio"><i class="material-icons">done</i></div>
</label>
      </div>
      <div class="mobile-status">OPENED</div>
      <div class="mobile-company">TR</div>
      <div class="mobile-code">100063021</div>
      <div class="mobile-customer">นาย ทินกฤต หนูอักษร</div>
    </div>
    
    <div class="number-list cancel" id="list_2">
      <div class="mobile-radio">
      <label class="set--checkbox">
  <input type="radio" name="radio_text" onClick="selectList(2);" />
  <div class="set-radio"><i class="material-icons">done</i></div>
</label>
        
      </div>
      <div class="mobile-status">CANCELLED</div>
      <div class="mobile-company">TR</div>
      <div class="mobile-code">100063021</div>
      <div class="mobile-customer">นาย ทินกฤต หนูอักษร</div>
    </div>
    
    <div class="number-list cancel" id="list_3">
      <div class="mobile-radio">
      <label class="set--checkbox">
  <input type="radio" name="radio_text" onClick="selectList(3);" />
  <div class="set-radio"><i class="material-icons">done</i></div>
</label>
        
      </div>
      <div class="mobile-status">CANCELLED</div>
      <div class="mobile-company">TR</div>
      <div class="mobile-code">100063021</div>
      <div class="mobile-customer">นาย ทินกฤต หนูอักษร</div>
    </div>
    
  </div>
  <a href="#" class="button">OK</a>
</div>

script.js

function selectList(id){
  for(i=1;i<4;i++){
    $('#list_'+i).removeClass('active');
  }
  $('#list_'+id).addClass('active');
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

body{
  background: #ccc;
}
.modal-main{
  width: 480px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
  margin: auto;
  font-family: arial;
  .icon-alert{
    width: 62px;
    height: 55px;
    margin-left: auto;
    margin-right: auto;
    top: 42px;
    margin-bottom: 28px;
    position: relative;
  }
  h3{
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    color: #878787;
    margin-bottom: 18px;
  }
  .text-notice{
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    color: #878787;
  }
  .mobile-List{
    margin-top: 32px;
  }
  .mobile-List >.number-list{
    border-top: solid 1px #ececec;
    padding: 24px 25px 22px 25px;
  }
  .mobile-List >.number-list.active{background-color: #f8f8f8;}
  .number-list >.mobile-radio,
  .number-list >.mobile-company,
  .number-list >.mobile-code,
  .number-list >.mobile-customer,
  .number-list >.mobile-status{
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    color: #4a4a4a;
  }
  .number-list >.mobile-company{
    margin-right: 18px;
  }
  .number-list >.mobile-code{
    margin-right: 18px;
  }
  .number-list >.mobile-status{
    font-size: 12px;
    font-weight: bold;
    margin-left: 20px;
    width: 85px;
  }
  .number-list.open >.mobile-status{color: #57aa7a;} 
  .number-list.cancel >.mobile-status{color: #eca63e;} 
  .button{
    display: block;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 16px;
    bottom: 8px;
    border: none;
    position: relative;
    text-decoration: none;
    border-radius: 2px;
    background-color: #be493e;
    padding: 22px 0px 22px;
    font-size: 16px;
    color: #fff;
    text-align: center;
  }
}


.set--checkbox {
  display: inline-block;
  position: relative;
  input[type=radio] {display: none;}
  div {
    background: #f8f8f8;
    width: 34px;
    height: 34px;
    border-radius: 50px;
    border: solid 1px #ececec;
    text-align: center;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  input[type=radio]:checked ~ div.set-radio {
    background: #57aa7a;
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }
  input[type=radio]:checked:disabled ~ div.set-radio {
    background: #ccc;
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }
  i{
    color: #fff;
    position: relative;
    top: 5px;
    opacity: 0;
  }
  input[type=radio]:checked ~ div.set-radio i {
    opacity: 1;
  }
  span{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
  }
}