2017-03-09 14 views
-1

を私はこのようなカスタムの確認ボックスを作成しました$(".popup .body button[name='check']")停止機能まで、jQueryの

私は

promise and when 

てみましたが、そのdidntのが役立ちました。

tnxたくさん

+1

ポップアップ表示していますか? – CaptainHere

+1

[Sweet Alert](https://github.com/t4t5/sweetalert)のようなカスタムアラートライブラリを使用する方がはるかに簡単です – Gab

+1

formPopupを同期させるのは、 'alert'や'プロンプト '。コードを非同期にする必要があります。約束をどのように使ってみたか教えてください。 – Bergi

答えて

1

このような意味ですか?

jQueryはクリック機能で「this」を取得できませんでした.e.targetに置き換えられました。したがって、event.target ==あなたがクリックしているボタンです。

function showPopup(message, callback) { 
 
    $(".popup").css("display", "block"); 
 
    $(".title").html(message); 
 
    
 
    // only button 1, value will be true anyways, but just to show how to access the button object 
 
    $(".b1").on("click", (e) => { 
 
     var val = $(e.target).val(); 
 
     if (val == "true") { 
 
      closePopup(); 
 
      typeof (callback) != "undefined" ? callback() : null; 
 

 
     } else { 
 
      closePopup(); 
 
     } 
 
    }); 
 
    
 
    // button 2, try to split as much as you can, makes everything alot easier 
 
    $(".b2").on("click", (e) => { 
 
     closePopup(); 
 
    }); 
 
} 
 

 
function closePopup() { 
 
    $(".popup").css("display", "none"); 
 
    setTimeout(() => { 
 
     showPopup("back again",() => { console.log("callback"); }); 
 
    }, 2000); 
 
} 
 

 
showPopup("message",() => { console.log("callback"); });
.popup { 
 
    position: fixed; 
 
    display: none; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.popup-content { 
 
    position: absolute; 
 
    color: red; 
 
    background: green; 
 
    width: 300px; 
 
    left: calc(50% - 150px); 
 
    height: 100px; 
 
    top: calc(50% - 50px); 
 
    z-index: 2; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clear"> 
 
</div> 
 
<div class="popup"> 
 
    <div class="popup-content"> 
 
    <h1 class="title"></h1> 
 
    <button class="b1" name="check" value="true">Yes</button> 
 
    <button class="b2" name="check" value="false">No</button> 
 
    </div> 
 
</div>

関連する問題