1

几天来一直试图解决这个问题（我认为是新手的考验！）所以你的帮助将非常受欢迎。

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>

“对话框”代码工作正常，小部件按钮点击检测代码也工作良好。尽管如何将这些结合在一起并实现目标，但目前对我来说是一个谜。提前致谢！

4

1 回答 1

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();
        }
    });
});
于 2012-09-05T00:41:07.260 回答