Link change after closing modal window

Question

There is a modal window. Made by html + css. No js.

HTML:

.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }

 <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Modal Box</h2> <p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> </div> </div>

When the window is closed, the phrase #close is attributed to the URL. Question.How to change the modal window so that the URL does not fit #close ?

the fact is that the closure is done through an anchor, the usual anchor - that is, a href = "# close"
use the usual modal window - and the code is not so complicated and make it a trifle - I have to work already - I would show - in the morning from the night I will show you how to do it

Qwertiy ♦ Qwertiy 76k 17 73 198 · Accepted Answer · 2016-05-11T10:59:00

Use input:checked instead of :target :

 #openModal { display: none; } label { cursor: pointer; } .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } #openModal:checked ~ .modalDialog { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }

 <input type=checkbox id=openModal> <label for="openModal">Open Modal</label> <div class="modalDialog"> <div> <label for="openModal" title="Close" class="close">X</label> <h2>Modal Box</h2> <p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> </div> </div>

You put input in front of the block, and in css you do + .
I did this: input[id^='settings-checkbox-']:checked ~ .settings-window { opacity: 1 !important; pointer-events: auto !important; }
input[id^='settings-checkbox-']:checked ~ .settings-window { opacity: 1 !important; pointer-events: auto !important; }
@Tsyklop, why, if you can put them nearby and use just a plus instead of a tilde?

Link change after closing modal window

1 answer 1

More articles: