angular2：CSS目标选择器不起作用

Question

I'm trying to follow this example( http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ ) to create my own modal in an Angular2 project.

In my html template, I have

 <a href="#openModal" (click)="openDialog()" >Open Modal again</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>

The reason that I add (click)="openDialog()" to <a> is because href="#openModal" is not registered to the router. I have to prevent the default behavior in the method.

And, in the corresponding scss file, I have

.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);
}

In the component's ts file, I have the following method binding to the click event of my link.

openDialog(){
    event.preventDefault();
}

The above code snippet is to popup a modal after user clicks the link; however, nothing happended after doing it. I think the css .modalDialog:target selector is actually not working for some reasons so that the opacity has not been changed.

Answer 1

By calling preventDefault() you stop that element from becoming the target of the #hash .

You'll have to remove the preventDefault() call in order to set #openModal as the target of the hash of the URL on click, and use the :target selector.

The OP has stated that this works:

openDialog () {
    location.hash = "#openModal"
    event.preventDefault()
}