➀追従するモーダル目次の展開中(表示中)背景を固定できず、不用意な操作で「背景」がズレてしまう(スクロール)
➁ピュアモーダルと、追従するモーダル目次のJS干渉に伴い「特定条件下」で「機能不全」の発生。
⇒ピュアモーダルの展開で「追従する目次の展開ボタン」が表示されてしまう(黒い背景の表にきてしまう)※補足画像あり


問題点➀➁の解消を目的とした、対策(JS改修)をお願いします。 【問題点➀背景固定の補足】
本ページ「ピュアモーダル」の動きが、仕様要望を満たしています。
★「制作実績」欄のモーダルと同様の動き。 【動作確認】
当ページで、正常動作するようお願いします。
ピュアモーダルウィンドウ(ポップアップ)



モーダル展開しました。成功。こんな感じで表示できます。
アコーディオンやタブと同じく「格納コンテンツ」 しかし、装飾デザインは大きく異なる。状況により使い分けたい。
※15インチノートPC。この辺から「オーバーフロー」スマホやタブレットだと、まだまだ余裕♪
願わくば、インラインでスクロールさせず、スッキリさせたい。ケースバイケースだが、画像の占有比率を変更すれば、それなりに対応可。
そもそもモーダルに長文ぶち込むのはどうなのだろうか?ありっちゃアリ。なっしちゃナシだな~。悩ましい。
※内包コンテンツに制限ナッシ。なんでもOK。
モーダル展開しました。成功。「画像占有比率」を小さく変更。
なるたけオーバーフローさせたくないときに使用(文章量を優先)
ところで..。鳥って歩くとき「首を前後」に動かしますが、首をギブスで固定したらどうなるのでしょうか。
モーダル展開しました。成功。初めましてミニです。
モーダル展開しました。成功。バイーーーン。いらんか..?(たぶん不要)
適宜アニメーションの演出があったほうが「もうちょい読み進めようかな..」って、
思う気がするが、どうなんでしょう。
答え:アニメーションのクオリティーと人による(答えになってないか!)
ただ、無意味なアニメーションは避けたいですね..。
オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。オーバーフローさせます。
モーダル展開しました。成功。このイラスト。めっちゃキュート。
配色は(彩度×明度)このくらいがいいですね~。
輪郭線はやわらかく感じるが、存在感もありグッド。絵は単純化されつつ、影の入れかたがエクセレント!
チョットした解説ならば「モーダルギャラリー」でも完結! 工夫次第で便利なアイテム。これも、個人ブログ界隈で見かけない..。
よく見る「広告のモーダル」は悪い見本。とくにスマホは酷い..。とにもかくにも「閉じる」のがメンドイ。それはともかく、素のデザインはこんな感じ。すっきり♪
総評:工夫次第、ブログでも便利に使える装飾手法!
モーダルウィンドウ
【目的】
合理化。
【狙い】
サイトの省スペース。
【使いどころ】
コンテンツを「集中」して見て欲しい場合に、使用することが多い。※容易に閉じれる仕組みにしておかないと、読者にとっては大迷惑!
デザイン:リンクテキスト風(画像と補足内包)
通称:モーダル。またの名を「ポップアップ」闇が深い。Webエンジニア泣かせ..。
それはさておき、モーダル起動スイッチは「リンクテキスト風」 たぶん、1番使いやすい。
基本の型➀
画像:コンテナ幅100%/テキストオーバーフロー×インラインスクロール(文字数めっちゃ多い)
基本の型➁
画像:コンテナ幅60%/なるたけオーバーフローさせない(文字数多い)
基本の型➂
ミニサイズ。ちょっとした補足に使用。
(文字数少ない)※PC専用
基本の型➃+アニメ
画像:コンテナ幅80%/いろいろと丁度よい
(文字数やや多い)
ギャラリー風
画像:コンテナ幅100%/スライダー
(文字数ふつう)
ギャラリー解説風
画像:コンテナ幅100%/スライダー/スライド解説(文字数ふつう)
さらりとモーダルリンク
さらりとモーダルの振り返りをします。
見出しは全部で12
見出し3
見出し4
見出し5
見出し6
見出し7
見出し8
見出し9
見出し10
見出し11
見出し12
