投稿本文下ウィジェット「テキスト」をオーバーレイ表示させたい

PR 2017/1/12

このトピックには6件の返信、1人の参加者があり、最後に俊介により9年、 8ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2017年1月12日 8:03 PM #49430
  
  俊介
  ゲスト
  
  投稿本文下ウィジェット「テキスト(id=”text-24″)」を
  普段はdisplay:noneで非表示にして
  
  投稿本文内からＬＩＮＫで
  「テキスト(id=”text-24″)」の内容をオーバーレイで表示させることは可能でしょうか？
  
  可能であれば土日にチャレンジしてみたいので
  アドバイスいただけないでしょうか
  
  よろしくお願いいたします
- 2017年1月12日 10:37 PM #49434
  
  Hidekichi
  ゲスト
  
  > オーバーレイで表示
  
  つまりは透過したいということですか？
  その場合、透過させて表示するものは何ですか？
  
  もし#text-24の背後に何もないなら、#text-24を透過させても透過しているようには見えないかもしれません。
- 2017年1月12日 10:58 PM #49435
  
  俊介
  ゲスト
  
  Hidekichi先生
  
  こんばんは
  
  こんな感じです
  
  これをワードプレスで
  ウィジェットの内容を表示できますか？
- 2017年1月13日 9:03 AM #49443
  Hidekichi
  ゲスト
  これはおそらく何かしらのリンクをクリックしてある要素を表示させたりするモーダルというものです。
  
  理屈的には、 jQuery 開いたモーダル以外をクリックするとモーダルを閉じるこんな感じです。
  
  うちのサイトですが、これはどちらかというと開いたモーダルをそのもの以外をクリックした時に閉じるというのに焦点を当ててますが、jQueryを使えばある要素にクラスをつけたり外したりができるため表示非表示は簡単にできます。
  
  表示させるためにはどうすればよいかですが、まずbodyタグのすぐ下に画面全体を覆うような背景とその中身を作ります。例えば、
```
$("body").prepend("<div class="md-wrapper">);
$(".md-wrapper").append(目的の部分のセレクタ);
```
  こんな感じです。html的には、
```
<body>
  <div class="md-wrapper">
    <div class="目的のセレクタ">その中身</div>
  </div>
...
```
  このようになります。次に.md-wrapperは画面全体を覆うグレー背景だとすれば、
```
body {
  position: reletive;
}
.md-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, .7);
}
```
  こんな感じにしておけば70%の透過の黒が画面を覆う事になります。しかしこのままではいつも画面を覆ってしまうので、
```
.md-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, .7);
  visibility: hidden;
  opacity: 0;
  transition: .3s ease;
}

.md-wrapper.show {
  visibility: visible;
  opacity: 1;
}
```
  とすれば、.md-wrapperに.showがつけば表示されるようになり、かつcssのtransitionでアニメーションさせることでじわりと浮かび上がるようになります。
  
  で、いつものことながら説明が面倒になるのでサンプル作りました。
  
  サンプル: 記事タイトルをクリックするとモーダルが開き、開いた要素の中身以外をクリックしたら閉じる | codepen
  
  このサンプルと若干、サンプル記事の内容とは違いますが、意味合いとしては、
```
if ( $(e.target).closest(".test").length === 0 ){
	$(".md-wrapper").removeClass("show");
}
```
  クリックした先祖の要素に.testが無い場合は、.testをクリックしていない(背景をクリックした(全画面なので.test以外のものは背景しか無い))ということで、モーダルを表示している.md-wrapperから.showを取り除きます。
```
if ( e.target === $(".entry-title").get(0) ){
	$(".md-wrapper").addClass("show");
}
```
  この部分は、.entry-titleをクリックしたら.md-wrapperに.showを加えてモーダルを表示するということです。
  
  .testは、モーダルの中に表示する要素です。これはページの中のどこにあっても良いです。ただし、サンプルのままだと要素を移動させてしまうので、jQueryの最初の方で、
  
  var testClone = $(".test).clone();
  
  としてクローンしたものをモーダルの中に入れれば要素が移動することはありません。なので、質問で言えばモーダルを閉じたとしても、投稿下にそのウィジェットが表示されたままということです。
- 2017年1月13日 9:20 PM #49454
  
  俊介
  ゲスト
  
  ありがとうございます
  
  投稿本文下ウィジェット「テキスト」に記入した
  何かしらの文章･･････
  オーバーレイで表示させることが出来ました
  
  教えて頂きました方法で以下は可能でしょうか？
  ・モーダル内にスクロールを表示させたい
  ・文中の特定の文字をクリックしてモーダルを表示させる場合
  　特定の文字をＡタグのようにしたい（LINKとわかるように）
  
  何卒宜しくお願い致します
- 2017年1月13日 10:51 PM #49456
  
  Hidekichi
  ゲスト
  
  > モーダル内にスクロールを表示させたい
  
  要素の高さを固定して中身が溢れた場合にスクロールなら、overflow-y: scrollでイケると思いますが、マウスホイールでスクロールさせると背景のグレーの更に背景になるモーダル裏の部分もスクロールしてしまうかも知れません。
  そういった場合は、スクロールさせたい要素にフォーカスが当たっている場合はモーダル裏に当たるbodyなりに何かしらクラスを当ててbodyにそのクラスがある場合はスクロールさせないなどの処理が必要です。
  つまり、高さを画面の高さ(height: 100vh)でoverflow-yにhiddenを入れるとか。
  
  > 文中の特定の文字をクリックしてモーダルを表示させる場合
  > 特定の文字をＡタグのようにしたい（LINKとわかるように）
  
  数が少なければ、span class=”なんちゃら”でなんちゃらをリンクっぽくすれば良いですが、数がある場合は置換する必要があるかと思います。
  
  サンプル: 文字の一部置換(class追加) | jsFiddle
  
  こんな感じでしょうか。
  jQueryはリンクでなくてもセレクタで発火できます。逆にリンクだとリンクのデフォルトの画面遷移の処理をキャンセルさせる必要があるので、リンクとわかるように見せかけるだけならaタグで入れる必要はありません。cssで該当のクラス部分をそのようにスタイルすればよいだけです。
  
  普通にリンクさせたい場合はaタグで書けば良いです。
- 2017年1月14日 8:45 AM #49460
  
  俊介
  ゲスト
  
  ご教示頂きまして
  ありがとうございました
  
  じっくりと試してみます
投稿者

投稿