KentKeller Posted November 25, 2015 Share Posted November 25, 2015 I am a very much a rookie trying to put together my web site. I am trying to use html5 and w3.css. There is a example that is very close to what I want, except I want to use a link instead of a button. Below is the example with my added link right below the button. The button can open and close the modal form as many times as you want, but my link will only open it once, unless you reload the page. How do I fix that. thanks for any help. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Modal</button> <a href="#id01"> Test </a> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-teal"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span> <h2>Header</h2> </header> <div class="w3-container"> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div> <footer class="w3-container w3-teal"> <p>Footer</p> </footer> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted November 26, 2015 Share Posted November 26, 2015 If you want a link instead of a button, just change the <button> element for an <a> element. <a onclick="document.getElementById('id01').style.display='block'">Open Modal</a> Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted November 30, 2015 Share Posted November 30, 2015 If all you are doing is a styling change then you don't need the event just do a rule for the targeted element with the declaration: #ido1:target { put the properties here instead of in the e3-colsebtn class. Inline events and inline stylying are bad practice anyway. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now