モーダルボックス+チェックボックス+ Cookie
-
05-07-2019 - |
質問
以下を達成したい:
- ホームページの読み込み時に、モーダルボックスを表示
- モーダルボックス内で、単一の必須チェックボックスを使用してフォームを表示します
- チェックボックスをオンにし、送信をクリックしてモーダルボックスを閉じ、ホームページに進みます
- 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"> I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>
解決
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"> I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>
他のヒント
以前にSimpleModalと呼ばれるJQueryプラグインを使用しました
私は、それがどれほど簡単であるかに非常に感銘を受けました。モーダルには複数のチェックボックスがあり、チェックボックスの値を送信ボタンが押された後にモーダルがオンになっているページに戻しました。
すべての情報とデモは、 SimpleModalホームページ
にあります。やっと動作しました! Cookieが存在し、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
所属していません StackOverflow