2017-05-08 4 views
0

今日、モーダルウィンドウについて学んだことがありますが、過去2時間ほど読んでいますが、実際にどのように動作するかはわかりません。私はdraft.htmlファイルを作成し、w3schoolのチュートリアルに従うことで、完璧に動作していました。私はメインのプロジェクトに移植するために、すべての.cssコードといくつかのhtmlを編集しました。ボタンをクリックするとモーダルダイアログボックスが開きますか?

それは機能しません。ダイアログボックスに表示されるテキストは、ページの上部/下部に表示されます。私は間違って何をしていますか?私はあなたに私のHTMLとlinkを提供します。ここで私はモーダルボックスを持っています。ヘッダーとフッターは必要ありません。それは私にとっては無意味です。

私はdivを非常に多くの場所に配置しようとしましたが、私は正直なところ、それらを置く場所や何をするべきか分かりません。私はモーダルボックスが

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
<title>Index</title> 
 
<link href="index.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body class="Background"> 
 
\t <div class="BtLogin"> 
 
\t \t \t <a href="Login/paginalogin.php"> 
 
\t \t \t \t <input type="image" id="admin" src="http://i.imgur.com/I3D3nqm.png"> 
 
\t \t \t </a> 
 
\t </div> 
 
\t <form action="" id="myform" method="POST"> 
 
\t \t <table class="Table"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt1" form="myform" value="A"></td> 
 
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt2" form="myform" value="B"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt3" form="myform" value="C"></td> 
 
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt4" form="myform" value="D"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt5" form="myform" value="E"></td> 
 
\t \t \t \t <td><input class="Button ButtonTxt" type="submit" name="ContBt6" form="myform" value="F"></td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </form> 
 
</body> 
 
</html>

私は同じことを行うために、すべての6つのボタンを必要とする仕事に取得しようとせずに

はここで、私のコードです。彼らに同じIDを与えることで、これはうまくいくと思いますよね?しかし、私の問題は、divの場所を配置するように思われる。あなたは私を助けることができます?私はコード全体を修正する必要はありません、ちょうど私が間違ってやっていること、そして修正するために何をすべきかを知りたいだけです。

答えて

0

基本に戻る。 :target擬似クラスを使用して、純粋なCSSモーダルウィンドウを作成できます。 Mozillaにはhereの基本的な例があり、Dynamic Driveにはmore elaborate CSS Modalもあります。

関連する問題