Question

Heyo！所以我最近遇到了这个问题而且它真的很烦我，所以我需要这个按钮使用id =启动一段代码，当我在网页上使用代码时它工作得很好但是当我在里面使用它时由Tingle.js提供的JS模式不起作用，它只是没有发布。

这是我的模态：

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();

}

这是我需要启动的部分＆＃39; confirmButton＆＃39;

<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

取出你的锚标签并使用内置于tingle的按钮功能

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，等待响应，所以你可以尝试这个...（另外，我看到你已经包含了jQuery）

                     // 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>

代码无法识别JS Modal中的id

3 个答案: