2017-05-08 1 views
0

그래서 오늘 모달 창에 대해 배웠고 지난 2 시간 정도 책을 읽었습니다.하지만 실제로 작동하는 방식을 제대로 이해하지 못했습니다. 초안 .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이고 동적 드라이브는 more elaborate CSS Modal입니다.

관련 문제