<dialog id="myModal">
  <div class="container">
   ₺ 49.99 değerinde ödemeniz bulunmaktadır. Onaylıyor musunuz?
  </div>
  <div class="action">
    <button class="yes">Evet</button>
    <button class="close">Hayır</button>
  </div>
</dialog>

<div id="result"></div>

$gray: #ddd;
$white: white;

body{
  font: 1em sans-serif;
}

:focus {
  outline: 0;
}

#myModal {
  transform: scale(1.5);
  border-radius: 7px;
  margin-top: 20px;
  width: 30%;
  color: black;
  border: 1px solid $gray;
  line-height: 25px;
  .container {
    border-bottom: 1px solid $gray;
    padding: 20px 0;
  }
  //modal action
  .action {
    padding: 10px 0 0 0;
    text-align: right;
    button {
      display: inline-block;
      background-color: $white;
      border: 1px solid $gray;
      padding: 5px 10px;
      cursor: pointer;
      &.yes {
        background-color: #27ad27;
        color: white;
      }
      &:hover:not(.yes) {
        background-color: #eee;
      }
    }
  }
}

#result{
  padding: 20px;
  text-align: center;
  font-weight: 700;
  background-color: #fff082;
  display: none;
}

var _modal = {
  modal: document.getElementById('myModal'),
  close: document.querySelector('#myModal .close'),
  yes: document.querySelector('#myModal .yes'),
  result: document.querySelector('#result')
};

//open modal
_modal.modal.showModal();

//modal close button action
_modal.close.addEventListener('click', function() {
  _modal.modal.close('cancelled');
  result.innerHTML = "İşlem iptal edildi.";
  result.style.display = "block";
});

//modal yes button action
_modal.yes.addEventListener('click', function() {
  _modal.modal.close('cancelled');
  result.innerHTML = "Ödemeniz alınmıştır. Teşekkürler!";
  result.style.display = "block";
});