JS Modal内でコードがIDを認識しない

Question

Heyo！ 私は最近この問題を抱えていました。実際に私を悩ますので、id =を使用してコードを起動する必要があります。コードをWebページで使用すると完全にうまく動作しますが、 Tingle.jsが提供するJS Modalは機能しません。起動することはありません。

これは私のモーダルです：

function showPending(data) { 
var modal = new tingle.modal({ 
    footer: false, 
    stickyFooter: false, 
    cssClass: ['custom-class-1', 'custom-class-2'] 
}); 

var content = "<div style='text-align:center;font-size:25px;letter-spacing:2px;color:#379639;'>Success!</div>"; 
content+= "<div style='font-size:12px;letter-spacing:1px;text-align:center;color:#2B2E32;margin-bottom:25px;'>You've received an offer from our bot <b>" + data.bot + "</b></div>"; 
content+= "<div class='input-box' style='width:35%;background:#e8e8e8;margin:auto;padding-top:12px;padding-bottom:5px;padding-left:6px;padding-right:6px;'><div style='font-size:12px;letter-spacing:4px;text-align:center;color:#2B2E32'>Security Code</div><div style='font-size:2em;color:black;text-align:center;'>" + data.code + "</div></div>"; 
content+= "<div style='margin-top:30px;text-align:center;'><a style='background:#1E1E26;padding:9px 25px 9px 25px;border-radius:35px;;color:white;letter-spacing:1px;font-size:25px;' id='offerButton' href='https://steamcommunity.com/tradeoffer/" + data.tid + "' target='_blank'>Offer</a>"; 
content+= "<a style='margin-left:5px;background:#1E1E26;padding:9px 25px 9px 25px;border-radius:35px;color:white;letter-spacing:1px;font-size:25px;' id='confirmButton' data-tid='0'>Claim</a></div>" 
    $("#confirmButton").data("tid", data.tid); 
    if (data.amount < 0) { 
     if (data.state == 2 || data.state == 3 || data.state == 4 || data.state == 9) { 
      $("#confirmButton").html("Confirm"); 
     } else { 
       $("#confirmButton").html("Confirmed"); 
     } 
} 

modal.setContent(content); 

modal.open(); 

}

これは私が

<a style='margin-left:5px;background:#1E1E26;padding:9px 25px 9px 25px;border-radius:35px;color:white;letter-spacing:1px;font-size:25px;' id='confirmButton' data-tid='0'>Claim</a> 

Answer 1

'confirmButton' があなたのアンカータグを取り出し、ボタンの機能を使用する起動する必要がある作品ですつけまつげに組み込まれて

modal.setContent(content); 

if (data.state == 2 || data.state == 3 || data.state == 4 || data.state == 9) 
{ 
    modal.addFooterBtn("Confirm", 
     'tingle-btn tingle-btn--primary', 
     function() { 
      // put your confirm logic here 
      modal.close(); 
    }); 
} 
else { 
    modal.addFooterBtn("Confirmed", 
     'tingle-btn tingle-btn--primary', 
     function() { 
      // put your confirmed logic here 
      modal.close(); 
    }); 
} 

modal.open(); 

Answer 2

これは真のモーダルではないので、カーソルはmodal.openで停止せず、応答を待っているので、これを試すことができます...

     // hard coded data for testing 
        var data = { amount: -1, state: 10 }; 

        // this function makes sure that the dialog does not appear until the pages 
        // is fully loaded (this is probably why my second attempt did not work) 
        $(function ($) { 
         showPending(data); 
        }); 

        function showPending(data) { 
         var modal = new tingle.modal({ 
          footer: false, 
          stickyFooter: false, 
          cssClass: ['custom-class-1', 'custom-class-2'] 
         }); 

         var content = "<div style='text-align:center;font-size:25px;letter-spacing:2px;color:#379639;'>Success!</div>"; 
         content += "<div style='font-size:12px;letter-spacing:1px;text-align:center;color:#2B2E32;margin-bottom:25px;'>You've received an offer from our bot <b>" + data.bot + "</b></div>"; 
         content += "<div class='input-box' style='width:35%;background:#e8e8e8;margin:auto;padding-top:12px;padding-bottom:5px;padding-left:6px;padding-right:6px;'><div style='font-size:12px;letter-spacing:4px;text-align:center;color:#2B2E32'>Security Code</div><div style='font-size:2em;color:black;text-align:center;'>" + data.code + "</div></div>"; 
         content += "<div style='margin-top:30px;text-align:center;'><a style='background:#1E1E26;padding:9px 25px 9px 25px;border-radius:35px;;color:white;letter-spacing:1px;font-size:25px;' id='offerButton' href='https://steamcommunity.com/tradeoffer/" + data.tid + "' target='_blank'>Offer</a>"; 
         content += "<a style='margin-left:5px;background:#1E1E26;padding:9px 25px 9px 25px;border-radius:35px;color:white;letter-spacing:1px;font-size:25px;' id='confirmButton' data-tid='0'>Claim This</a></div>" 



         modal.setContent(content); 
         if (data.state == 2 || data.state == 3 || data.state == 4 || data.state == 9) { 
          $("#confirmButton").text("Confirm"); 
          $("#confirmButton").on("click", function() { 
           // take action to confirm 
           alert("confirm"); 
           modal.close(); 
          }); 
         } 
         else { 
          $("#confirmButton").text("Confirmed"); 
          $("#confirmButton").on("click", function() { 
           // take action to confirmed 
           alert("confirmed"); 
           modal.close(); 
          }); 
         } 
         modal.open(); 
        } 

Answer 3

いくつかの余分な情報：あなたはそれらのボタンを使用しますが、あなたのボタンがこれを行うようにそれらが見えるようにしたい場合：

<style> 
    /* Your style info copied from the anchor. */ 
    .tinglebtn { 
     margin-left:5px; 
     background:#1E1E26; 
     padding:9px 25px 9px 25px; 
     border-radius:35px; 
     color:white; 
     letter-spacing:1px; 
     font-size:25px; 
    } 
</style> 

<script> 
    // blah blah blah all the other code left out 

    modal.setContent(content); 
    modal.addFooterBtn('Comfirm', 'tinglebtn', function() { 
          // here goes some logic 
          modal.close(); 
         }); 


</script>