knowledge

  • Click the A TAB to change the hash part of the page link.
  • :targetThe selector can select the tag that has the same ID as the page hash.

Code implementation

Define popover ID =” Modal “in the page to associate hash.

Add popover open button, a TAB, link address is popover ID.

<a href="#modal">open modal</a>
<div id="modal">
    <h1>modal</h1>
</div>
Copy the code

Add style class=”modal” to popover, add close button inside popover close.

<div class="modal" id="modal">
    <h1>modal</h1>
    <a href="#">close</a>
</div>
Copy the code

In CSS, pop-ups are hidden by default, and the basic styles of pop-ups are set.

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}
Copy the code

Add the target selector to the CSS to make the popover display the same hash value as the popover ID.

.modal:target {
    display: block;
}
Copy the code

Refer to the link

  • Online example
  • Light-Modal