Q&A
実際にそのイメージのようなものを実装してみて言ってますか？フィルターがかかった状態で送信ボタン押してみましたか？反応しましたか？
イメージはこちらのようなものです。
http://undefined.seesaa.net/article/70987493.html
※ こちらの場合、背面のコンテンツがさわれてしまうので、こちらを何とかしたいです。
jsで実装する必要はなく、イベントに対し、募集期間が終了した時に、フィルターをかけ、そのページ内で他の操作をできないようにさせたいです。
最前面に半透明のフィルターと文言「募集が終了しました」というのが表示できるようにしたいのですが、
こういったことは可能でしょうか？
宜しくお願い致します。
追記
参照サイトをもとに、実際に試してはおります。
https://codepen.io/anon/pen/bRQmpO
上記コードでいうところの
id="filter" が付いている場合に、
aタグのリンクがつなかないようにしたいです。
aタグをdisabledにするという方法は可能な限り避けたいです。
理由は、実際のサイトは複数箇所に、かつ、動的にリンクを設置しているためです。
実際に試しております。リンクは押せてしまうので質問した次第です。サンプルコード程度でしたので、載せるべきか迷いましたが、御指摘をいただきましたので、記載します。こちらで宜しいでしょうか？
回答3件
0
クリックしてもフィルタを解除しないようにすればよいだけだと思いますが…？
投稿2017/07/11 00:13
総合スコア3095
ありがとうございます。
参考サイトでは、それで良いのですが、実際のサイトは、ボタンやリンクが複数あります。
添えぞれに、disabledをつけるのはあまり良い実装方法ではないような気がしましたので
質問した次第です。
見ました。
解決策はmiyahanさん案がいいので新たに回答を立てずこちらに書きます。
コードが間違ってます。
イメージと同じようにフィルターは単独で書いてください。
<div id="filter"></div>
<div class="cont"><a href="example.com">hoge</a></div>
このコードを始めに書いておいてもらえれば一発解決だったと思います。
それぞれにdisabledをつける必要はありません。
サンプルサイトのcodeのコメントをしっかり読んで下さい。
// フィルターをクリックするとフィルタをOFFに
と書かれているので、それをしないようにすればいいだけですよ。
皆様有難う御座います。
フィルターの囲い込み方に問題があったとのことで大変失礼致しました。
ご指摘の通り、動作確認できました。
0
ベストアンサー
一番簡単な解決は以下のタグをbody内にベタっと。
CSSのお話になります。
bodyタグ内に半透明のフィルタをCSSで定義して、その中に中央寄せでテキストを配置してください。
ポイントはbackground-colorをrgbaで定義するところです。
opacityで半透明化してしまうと、中央寄せで表示するテキストまで半透明が効いてしまうので。
html
1<div style="display: flex;position: fixed;width: 100%;height: 100%;justify-content: space-around;opacity: 1;z-index: 2000000000;background-color: rgba(55, 55, 55, 0.6);"> 2 <div style="opacity: 1;font-size: 2em;color: white;margin: auto;">募集が終了しました</div> 3</div>
追記：IE8はrgbaが効きませんのでご注意ください。
cssのfilterプロパティを使って表現しますが、今回は割愛します。
投稿2017/07/11 02:16
編集2017/07/11 02:28総合スコア764
0
HTMLを以下のようにしてみてはどうでしょうか？
HTMLには手を加えず、かつJSも使用不可であれば、ちょっと思いつきませんが。
※CSSに変更はありません。
html
1<div id="filter">掲載終了</div> 2 3<div> 4 <a href="example.com">hoge</a> 5 <button>button</button> 6</div>
投稿2017/07/11 01:56
退会済みユーザー
総合スコア0
ご回答ありがとうございます。
HTMLやJSの変更はかまいません。
また、divの囲い込む範囲が違うとのことで、理解できました。また、動作確認できました。
ありがとうございます。
追加で恐縮ですが、現状ですと、掲載終了という文言が左上でかつ、文字が見えなくなってしまっております。
https://codepen.io/anon/pen/bRQmpO
上記コードに少し付け加えたのですが、画面中央に、メッセージを表示させることはできますでしょうか？
宜しくお願い致します。
あなたの回答
tips
プレビュー
