Question

一直试图弄清楚这几天（作为一个新手的考验，我想！）所以你的帮助将非常受欢迎。

jscript小部件显示“继续”按钮。当用户单击按钮时，我需要一个模式对话框来显示一条消息（包含指向协议文档的超链接）和一个用户确认他们已阅读协议的复选框。关闭对话框后，如果checkbox = 0，则“继续”按钮会打开相同的对话框（循环，直到单击复选框：checkbox = 1）。

这是我到目前为止收集的代码......

对话框：

<a href="#" id="sdHc3" rel="simpleDialog3">Click to open dialog</a>  
<span style="display:none;" id="checkboxStatus"></span>

<div style="display:none;" id="simpleDialog3">
    <h3>Terms and Conditions</h3>
    <form id="checkboxForm">
        Please check box to confirm that you have read the <a href="assets/docs/agreement.html">agreement</a>: <input type="checkbox" class="chckbx" value="1" />
    </form>
    <p><a href="#" class="close">Close</a></p>
</div>


<script type="text/javascript">
$('#sdHc3').simpleDialog({
    showCloseLabel: false,
    open: function () {
        $('#checkboxStatus').html('');
    },
    close: function () {
        var c = [];
        $('#checkboxForm :checkbox:checked').each(function () {
            c.push($(this).val());
        });
        $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
    }
});
</script>

并检测小部件按钮上的点击：

<script type = "text/javascript">
document.body.onmousedown = function (e) {
    var query = window.location;
    var anchor1=query.hash.substring(1); //anchor without the # character
    if( ($(event.target).hasClass("gwt-Button")) && (anchor1=="step3"))
    {
        alert("Widget button clicked");
    }
}
</script>

'对话'代码正常工作，小工具按钮点击检测代码也能正常工作。虽然如何将这些结合在一起并实现目标，但这对我来说是一个谜。提前谢谢！

Answer 1

因此，当单击小部件按钮时，您需要查看输入是否已选中，如果没有，则再次显示对话框：

$(document).ready(function() {
    // detect button click
    $('.gwt-Button').click(function(ev) {
        ev.preventDefault();
        var anchor = window.location.hash.substring(1); // remove # character
        if (anchor != "step3") {
            return; // not step 3
        }
        if ($('#checkboxForm .chckbx').is(':checked')) {
            // checked
        }
        else {
            $('#sdHc3').click(); // trigger dialog again
        }
    });

    // setup dialog
    $('#sdHc3').simpleDialog({
        showCloseLabel: false,
        open: function () {
           $('#checkboxStatus').html('');
        },
        close: function () {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function () {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
        }
    });
});

带有复选框和链接的jQuery模式对话框

1 个答案: