Jump to content

link to id rather than button


KentKeller

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...