注意喚起やローディング、アピールしたいことなど、1回目のアクセス時のみ何かを表示したいときのサンプルです。
サンプルコード
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #bg { position: fixed; right: 0; bottom: 0; z-index: 9999; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #000000; opacity: 0.8;}#first { position: fixed; top: 50%; left: 50%; z-index: 9999; width: 500px; height: 200px; margin: -100px 0 0 -250px; text-align: center; background: #ffffff;}#first .text { margin: 50px 0;} |
#bgが背景要素、#firstが表示内容になります。
必要なHTML要素はjQueryで埋め込んでいます。
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var period = 1; // 有効期限日数$(function() { // 1回目のアクセス if($.cookie('access') == undefined) { // cookie追加 $.cookie('access', 'on', { expires: period }); // メッセージの表示 $('body').append($('<div>').attr('id', 'bg')); $('body').append( $('<div>').attr('id', 'first') .append($('<p>').addClass('text').text('1回目のアクセスのみ注意文言を表示します。')) .append($('<a>').attr('href', '#').addClass('brn').text('入場する')) ); // 2回目以降のアクセス } else { } // メッセージの削除 $(document).on('click', '#first a', function() { $('#bg, #first').remove(); return false; }); // cookieの削除 $(document).on('click', '#del', function() { $.removeCookie('access'); });}); |
いつも大変参考にさせていただいております。
1回目のアクセス時のみに表示される「1回目のアクセスのみ注意文言を表示します。」の文章の下に画像を追加したい場合は、どのような記述になるでしょうか？
また、改行を使った文章の追加は「\n」ではできないのでしょうか？
初歩的な質問で大変申し訳ないですが、教えていただけますと幸いです。
宮村伊澄さん
コメントありがとうございます。
画像を追加したパターンを作ってみましたが、こちらで問題ないでしょうか。
https://cly7796.net/blog/sample/only-the-first-display/index2.html
sample2.jsの12行目で追加する画像の設定を行い、16行目で追加しています。
「1回目のアクセスのみ～」の文言に改行を追加しましたが、改行については<br>タグを追加することで行えます。
ただtext()だとHTMLタグが使えないので、テキスト追加部分をhtml()に変更しています。(sample2.jsの15行目)