単一のhtmlページのシンプルな複数のモーダルテキストボックス

Question

私は初心者ですが、画像を持つHTMLページを作成しようとしています。クリックすると、テキストボックスがポップアップし、情報が表示されます。テキストは約150〜200語です。私はポップアップボックスを反応的にします。

これに多大な時間を費やした結果、私の初心者レベルでは、スクロールバー付きのモーダルボックスを使用することが最善の解決策でした。元のバージョンは、私が使用される場合、スクロールバーが完全にテキストを読み取るために下までスクロールすることができないため http://www.w3schools.com/howto/howto_css_modals.asp

及びIは、相対的に絶対からコードのライン8を修正：私はこのコード/ガイドを使用しています自分でコードを試してみました。

.modal { 
display: none; /* Hidden by default */ 
position: relative; /* Stay in place */ 

ここでは少し修正してバージョンをアップロードしました。

http://sugastore.com/test/modal-textbox.html

はしかし、私は、同じHTMLページに複数のモーダルのテキストボックスを持つようにしたいと私はこれを行う方法を知りません。私はオンラインで情報を読んでいて、番号付きの部門IDについての情報はあまりにも進んで理解しています。

私の質問は：

Q1。このモーダルコードを使用して、1ページに複数のモーダルボックスを作成するにはどうすればよいですか？ （そして彼らが反応するように）

また、それほど重要ではありません（私はオンラインで読むことができると確信していますが、ここでも尋ねます）。

Q2。リンクをボタンから画像に変更すると、画像をクリックするとモーダルボックスがポップアップします。

Q3。モーダルを絶対から相対に変更すると（上記のように）、半透明の黒い背景がページ全体に適合しません。これを修正する簡単な修正はありますか？

レスポンシブであり、多くのテキストを扱うためのスクロールを可能にする、単純な応答性の複数のモーダルテキストボックスのポップアップ（画像をクリックすると）のスクリプト/コードの例を既に持っている人を歓迎します。

Q1：

Answer 1

はこれを試してみてくださいあなたは、複数のモーダルを作成するためのコードを使用することができますが、それらに異なるIDを与える必要があります。たとえば#myModal、＃myModal1、＃myModal2などの場合は、表示される内容に従って名前を付けます。ブートストラップモーダルが応答可能に設計されているため、応答性が必要です。

Q2：ボタンタグをイメージタグに置き換え、IDを「myBtn」にします。イメージをクリックするとモーダルがトリガーされます

Q3：相対を固定に変更します。これは問題を解決するはずです。私は改正 http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php

：自分の質問に答えるために

Answer 2

私はそれが仕事を得ることができなかったので、私はから働いていた元のコードとソースをスクラップしまって、代わりに私が発見し、ここからの例を使用しました以前に提案されていたDiv IDは、私が使用していた元のコードとは違って、何らかの理由でこのモーダルで動作するdiv IDを変更しています。

http://sugastore.com/test/multiple-modal-test.html