模态框+复选框+ cookie

时间:2009-10-21 22:55:19

标签: javascript jquery cookies checkbox modal-dialog

我想实现以下目标:

  • 在主页加载时,显示模式框
  • 在模式框中,显示包含单个必填复选框的表单
  • 选中复选框后,点击提交并关闭模式框,然后转到主页
  • 使用Cookie
  • 记住此复选框勾选首选项
  • 在用户返回主页时,如果他们选中了复选框, 模态框不会显示

我一直在这个地方:

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

因为我可以在页面加载时显示模式框,但我无法弄清楚如何获取表单以强制选中复选框并关闭框。我也不知道在设置cookie时从哪里开始。

任何指针都会非常感激。

由于

编辑:包含代码:

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

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

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

});

2.html - 通过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>

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

我不久前使用了一个名为SimpleModal

的JQuery插件

我对它的轻松印象非常深刻。在模态上我有多个复选框,并且在点击提交按钮后,将复选框的值带回页面,模态处于打开状态。

所有信息和演示都在SimpleModal homepage

答案 2 :(得分:1)

终于可行了! 当cookie存在时,我错过了回调,这些抽搐&#39;&#39;围绕cookie的价值。 这是它的样子。如果有一些明显的错误,请告诉我。 (非常感谢您的支持)

function confirm(msg,callback) {
  $('#confirm')
    .jqmShow()
    .find('p.jqmConfirmMsg')
      .html(msg)
    .end()
    .find(':submit:visible')
      .click(function(){
        if(this.value == 'Proceed'){
           $.cookie("agreed_to_terms", '1', { expires : 1, path: '/' }); //set cookie, expires in 365 days
           (typeof callback == 'string') ?
            window.location.href = callback :
            callback();
        }
        $('#confirm').jqmHide();
      });
}


$().ready(function() {
  $('#confirm').jqm({overlay: 88, modal: 'true', trigger: false});

  // trigger a confirm whenever links of class alert are pressed.
  $('a.confirm').click(function() { 
    if ($.cookie('agreed_to_terms') == '1'){window.location.href = callback =
            callback()
       //they already have cookie set
    }else{
       confirm('About to visit: '+this.href+' !',this.href); 
    }
    return false;
  });
});// JavaScript Document