ポップアップウィンドウを使用して、Webページに短いメッセージを表示することは問題ありませんが、それほどフレンドリーではありません。ただし、ポップアップは、Webサイトの利用規約のような長い情報に関係がありません。これには、モーダルボックスモーダルと呼ばれるものを使用し、モーダルボックスにマルチラインテキストボックステキストアレアを埋め込む必要があります。
このことは、JavaScriptコードを手動で書くのは難しすぎますが、Bootstrapで書き込む方が簡単です。
1。基本的な目的
ハイパーリンクとボタンを備えたWebページがあります。
それらをクリックすると、以下に示すようにモーダルボックスが開きます。このモーダルボックスは、右上隅のXボタンをクリックし、以下の確認が閉じます。
2。生産プロセス
1. Bootstrapを使用する必要があるため、公式Webサイトのコンポーネントをダウンロードできます（クリックしてリンクを開きます）。生産環境で使用されるブートストラップバージョン（クリックしてリンクを開きます）。 Bootstrap3は2と互換性がありません。開発文書に従ってBootstrap3を直接使用することをお勧めします。この記事は、Bootstrap3にも基づいて作成されています。同時に、bootstrap3が提供するJavaScript効果は、jquery1.11でサポートする必要があります（クリックしてリンクを開きます）。古いブラウザIE6のjQuery2（クリックしてリンクを開く）ではなく、jQuery1.11（リンクをクリックしてリンクを開く）（jquery公式Webサイトからjquery公式Webサイトから互換性のあるダウンロードできます。ダウンロード後、サイトディレクトリを構成します。 bootstrap3をサイトディレクトリに直接解体し、js jsディレクトリにjquery-1.11.1.js、つまりbootstrap.jsと同じディレクトリに配置します。サイトフォルダーの構造は、ほぼ次のとおりです。
2。このWebページのコードは次のとおりであり、次の断片が分析されます。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title>モダルボックス</タイトル> <メタ= "ビューポート" content = "width = device-width、initial-scale = 1.0、user-scalable = no"> <link href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <script = "text/javascript" src = "src =" js/jquery-1.11.1.1.js src = "js/bootstrap.js"> </script> </head> <body> <body> <p> <a data-toggle = "modal" data-target = "＃mymodal">サービス契約</a> </p> <p> <ボタンタイプ= "ボタン" button "data-toggle =" modal "data-target =" id = "mymodal" role = "ダイアログ"> <div> <div> <div> <button type = "button" data-dismiss = "modal"> <span>×</span> </button> <h4 id = "mymodallabel"> service契約</h4> </div> <div> <p align = " 効果。本契約の条件には法的効果があります。本契約の条件には法的効果があります。本契約の条件には法的効果があります。 </textarea> </p> </div> <div> <p align = "center"> <button type = "button" data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> div> </body> </html>
（1）<head>部分
<head> <！ - ページエンコード - > <メタhttp-equiv = "content-type" content = "text/html; charset = utf-8"/> <title>モーダルボックス</title> <！ - このWebページにPC、タブレット、携帯電話、その他のデバイスの画面に自動的に適応する必要があります - content = "width = device-width、initial-scale = 1.0、user-scalable = no"> <！ - この例では、3つの外部プラグインからのサポートが必要です。 type = "text/javascript" src = "js/bootstrap.js"> </script> </head>
（2）元々Webページに表示されたリンクとボタン
<p> <！ - data-toggle = "modal" data-target = "＃mymodal"はmymodalのオープンモーダルボックスを必要とします - > <a data-toggle = "modal" date-target = "＃mymodal">サービス契約</a> </p> <p> <！ - class = "btn-danger" - > <ボタンタイプ= "button" data-toggle = "Modal" data-target = "＃mymodal">サービス契約を読むにはここをクリック</button> </p>
（3）モーダルボックスパーツ
モーダルボックスの基本は次のとおりです。
したがって、次のコードが見つかります。
<！ - class = "Modal Fade"では、Animation Effect Fadeでモーダルボックスを開く必要があります。Class= "Modal"も問題ありませんが、非常に突然開かれています。 ID = "myModal"は上記のハイパーリンクとボタンをエコーします - > <div id = "mymodal" role = "ダイアログ"> <div> <！ - モーダルコンテンツの後にモーダルボックスレイアウトを実行する必要があります。 - > <div> <div> <！ - これはモーダルボックスのタイトルパーツであり、×のセミコロンと×を備えた転送文字を備えています。これは基本的にクローズボタンです - > <ボタンタイプ= "button" data-dismiss = "modal"> <span>×</span> </button> <！ - これはモーダルボックスのタイトルです<div> <！ - これはモーダルボックスの主要部分であり、3行の読み取り専用テキストボックスが埋め込まれています。テキストボックスはモーダルボックスの主要部分に中央にあります。テキストボックスがなくても大丈夫ですが、コンテンツは一度にユーザーに表示されます。では、なぜ窓をポップアップしないのですか？ - > <p align = "center"> <textarea rows = 3 readonly = "true" />本契約の条件は法的に効果的です。本契約の条件には法的効果があります。本契約の条件には法的効果があります。本契約の条件には法的効果があります。 </textarea> </p> </div> <div> <！ - これはモーダルボックスのテールであり、中央のOKボタンが配置されます - > <p align = "center"> <ボタン= "ボタン" data-dismis = "modal"> ok </button> </p> </div> </div> </div> div> </div> </div> </div> </div>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。