Issue with opening modal dialog box on button click?
Question
So, I've learned about modal windows today, and I've been reading on them for the past 2 hours or so, but I don't quite get how they actually work. I've created a draft .html file and by following the w3school's tutorial, it was working flawlessly. I even edited all the .css code and some html in order to port it over to my main project.
Thing is, it's not working. The text that should be on the dialog box just shows on top/bottom of the page. What am I doing wrong? I'll provide you with my html and the link where I got the modal box from. There's no need for header and footer, as it's quite pointless for me.
I've tried to place the div's in so many places, but I honestly don't know where to put them or what to do.
Here's my code, without me trying to get the modal box to work
<!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"> <div class="BtLogin"> <a href="Login/paginalogin.php"> <input type="image" id="admin" src="http://i.imgur.com/I3D3nqm.png"> </a> </div> <form action="" id="myform" method="POST"> <table class="Table"> <tr> <td><input class="Button ButtonTxt" type="submit" name="ContBt1" form="myform" value="A"></td> <td><input class="Button ButtonTxt" type="submit" name="ContBt2" form="myform" value="B"></td> </tr> <tr> <td><input class="Button ButtonTxt" type="submit" name="ContBt3" form="myform" value="C"></td> <td><input class="Button ButtonTxt" type="submit" name="ContBt4" form="myform" value="D"></td> </tr> <tr> <td><input class="Button ButtonTxt" type="submit" name="ContBt5" form="myform" value="E"></td> <td><input class="Button ButtonTxt" type="submit" name="ContBt6" form="myform" value="F"></td> </tr> </table> </form> </body> </html>
I need all 6 buttons to do the same thing. By giving them the same ID, I think this would work, right? But my problem seems to be where to place the div's. Can you help me out? I don't need you to fix me whole code, just want to know what I'm doing wrong and what I should do to fix it.
1 answers
solution1
0 2017-05-29 22:50:20
Go back to the basics. You can create a pure CSS modal window using the :target pseudo class. Mozilla has a basic example of this here , and Dynamic Drive has a more elaborate CSS Modal using this technique as well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.