質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1695閲覧

ポップアップ内にアンカーリンクをつけるのは可能でしょうか?

k-katapashi

総合スコア18

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/15 11:20

前提・実現したいこと

シンプルなHTMLコーディングによるサイトを制作しています。
「colorbox」というjQueryを使ってポップアップを実装しているのですが、表示したポップアップ内の情報量が多くなってしまいました。
ポップアップ内の構造としては以下の通りです。

【1】タイトルテキスト 文章文章文章文章文章文章文章文章文章 【2】タイトルテキスト 文章文章文章文章文章文章文章文章文章 【3】タイトルテキスト 文章文章文章文章文章文章文章文章文章

ポップアップを開くとき、通常は、「1つのリンク=1つのポップアップ」だと思いますが、ポップアップ内にアンカーリンクを設けて、ポップアップを開きつつ特定の場所に誘導するということは可能でしょうか?

例えば、
1. 「コンテンツ1」というリンクをクリック → ポップアップが開き、【1】が一番上に表示される
2. 「コンテンツ2」というリンクをクリック → ポップアップが開き、【2】が一番上に表示される
3. 「コンテンツ2」というリンクをクリック → ポップアップが開き、【3】が一番上に表示される

html

1<div> 2 <p class="more"><a href="#inline_content1" class="inline">コンテンツ1</a></p> 3 <p class="more"><a href="#inline_content1" class="inline">コンテンツ2</a></p> 4 <p class="more"><a href="#inline_content1" class="inline">コンテンツ3</a></p> 5</div> 6 7<div style="display:none"> 8 <div id="inline_content1"> 9 <p>【1】タイトルテキスト</p> 10 <p>文章文章文章文章文章文章文章文章文章</p> 11 <p>【2】タイトルテキスト</p> 12 <p>文章文章文章文章文章文章文章文章文章</p> 13 <p>【2】タイトルテキスト</p> 14 <p>文章文章文章文章文章文章文章文章文章</p> 15 </div> 16</div>

そもそも、情報量が多いコンテンツにポップアップを使うなという話なのですが…もし実現可能でしたらご教示いただければ幸いです。
どうぞ、宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

ご回答いただき、ありがとうございます。
ちょっと難しそうだったので、モーダルではない別な方法で先方を説得することにしました。
結果的に、解決できませんでしたが、このトピックが何かの参考になれば幸いです。

投稿2018/11/19 00:37

k-katapashi

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

それぞれのコンテンツが明確に別の記事であるというのでしたら
タブにして切り替えるというのもありだと思います。

投稿2018/11/15 13:24

m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

私も共感し調べてみたところ
ポップアップウィンドウではなくモーダルウィンドウの方ができそうです。
またはz-indexです。

投稿2018/11/15 11:40

編集2018/11/15 11:55
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問