模态框 + 复选框 + cookie

2022-01-17 00:00:00 checkbox cookies modal-dialog jquery javascript

我想实现以下目标:

  • 在主页加载时，显示模态框
  • 在模态框中，显示一个带有单个必填复选框的表单
  • 选中复选框，点击提交并关闭模式框，进入主页
  • 使用 cookie 记住此复选框勾选首选项
  • 在用户返回首页时，如果他们选中了复选框，模态框不会显示

我已经得到了这个:

http://dev.iceburg.net/jquery/jqModal

我可以在页面加载时显示模态框，但我不知道如何获取表单以使复选框成为强制性并关闭该框.设置cookie时我也不知道从哪里开始.

In that I can get the modal box displaying on page load, but I can't work out how to get the form to make the checkbox mandatory and close the box. I also don't know where to start when setting a cookie.

任何指针将不胜感激.

谢谢

包含代码:

Index.html - 在页面加载时显示模式框

Index.html - to display modal box on page load

$().ready(function() {
  $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });

    setTimeout($('#ex2').jqmShow(),2000); 

});

2.html - 通过 ajax 加载的模态框内容

2.html - modal box content loaded via ajax

function validate(frm) {
        if (frm.checkbox.checked==false)
    {
        alert("Please agree to our Terms and Conditions.");
        return false;
    }
}


<form action="" method="POST" onSubmit="return validate(form);" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>

推荐答案

加载 jquery cookie 插件以允许设置/读取 cookie:http://plugins.jquery.com/project/cookie然后..下面是这样的.未经测试，但你明白了

Load the jquery cookie plugin to allow to set/read cookies: http://plugins.jquery.com/project/cookie then.. something like this below. Untested, but you get the idea

index.html:

index.html:

$().ready(function() {
    if (!$.cookie('agreed_to_terms'))
    {
        $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });
        $('#ex2').jqmShow();    
    }
});

2.html:

$().ready(function()
{
    $('#agreeFrm').submit(function(e)
    {
        e.preventDefault();

        if ($(this).find('input[name=checkbox]').is(':checked'))
        {
            $.cookie('agreed_to_terms', '1', { path: '/', expires: 999999 });
            $('#ex2').jqmHide(); 
        }
    });
});

<form id="agreeFrm" action="" method="POST" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>

相关文章