odendi success

by salt

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<div class="row row-centered clearfix">
   <div class="col-lg-4 col-md-5 col-sm-6">
      <div class="panel panel-result">
          <div class="panel-heading">
               <div class="panel-icon panel-icon-success">
                    <span class="icon" aria-hidden="true"></span>
               </div>
               <h3>
               Taksit ödemeniz alınmıştır. Teşekkür ederiz.
               </h3>
          </div>
          <div class="panel-body">
               <div class="form-group">
                   <label class="label-control">E posta :</label>
                   <div class="input-group">
                       <input class="form-control" placeholder="E-mail Adresiniz" type="text" name="email" />
                       <span class="input-group-btn">
                             <button class="btn btn-success" type="button">Dekont Gönder</button>
                       </span>
                  </div>
              </div>
          </div>
          <div class="panel-footer">
             Güncel ödeme planınıza ve hesap hareketlerinize sol tarafta yer alan menüden ulaşabilirsiniz.
          </div>
      </div>
   </div>
</div>

CSS

/****************************

 TEB Appendix.css

*****************************/


.login-container .login-box .sifre-giris .btn-cont #ContentPlaceHolderLogin_ButtonGiris{
	width:160px;
}
.login-container .login-box .sifre-giris .btn-cont #ContentPlaceHolderLogin_ButtonTemizle{
	clear:both!important;
	padding: 5px 10px!important;
    font-size: 12px!important;
    line-height: 1.5!important;
    border-radius: 3px!important;
}







.input-custom label {
    width: 100%;
    font-weight: normal;
    display:inline-block;
    text-align:center;
}
.input-custom input[type="radio"]:empty, 
.input-custom input[type="checkbox"]:empty {
    display: none;
}
.input-custom input[type="radio"]:empty ~ label,
.input-custom input[type="checkbox"]:empty ~ label {
      position: relative;
      line-height: 22px;
      font-size: 22px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      color:#fff;
      width:22px;
      height:22px;
      display:inline-block;
      margin:0;
}
.input-custom input[type="radio"]:empty ~ label:before,
.input-custom input[type="checkbox"]:empty ~ label:before {
      content: '';
      position: relative;
      display: inline-block;
      width: 22px;
      height: 22px;
      text-align:center;
      color:#fff;
      font-size:16px!important;
      line-height:22px;
      border-radius:4px;
}
.input-custom input[type="radio"]:empty ~ label:before,
.input-custom input[type="checkbox"]:empty ~ label:before {
      content: '\A';
}
.input-custom input[type="radio"]:checked ~ label:before,
.input-custom input[type="checkbox"]:checked ~ label:before {
      content: '\e013'!important;
      font-family:'Glyphicons Halflings'!important;

}







.panel.panel-form{
	margin-bottom:30px;
      -webkit-box-shadow:none;
            box-shadow:none;
}
.panel.panel-form .panel-body label .btn-group{
    display: -webkit-box;
    display: -ms-flexbox;
   ...

JavaScript

$(function () {
       $(".table .row-table input").on("change",function(e){
       if($(this).type=="radio"){
          $(this).closest(".table").find(".row-table.active").removeClass("active");
       }
       if($(this).is(":checked")){
          $(this).closest(".row-table").addClass("active");
       }else{
          $(this).closest(".row-table").removeClass("active");
       }
    }).trigger("change");
    
    $('[data-toggle="popover"]').popover();
    
    
    $(".btn-success").on("click",function(){
           bootbox.confirm({
           title:"Uyarı",
        message: "This is a confirm with custom button text and color! Do you like it?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
            console.log('This was logged in the callback: ' + result);
        }
    });
    })
     
});