问题描述:

So i'm working on this school project with angular2. We need to make a website (read: NO BOOTSTRAP) using html/css/sass/js/angular2 and it needs to have a backend attached for dynamic data use. What i want to do is the following (check the image links)

before after

So the idea is that while working in angular with a template for the navigation, I want to have a popup showing me the "log in with facebook". Then i can refer it to a localhost:3001/login/facebook link where it should log me in correctly (backend is done correctly normally).

Now I have no idea how to create this in Angular2 because the app.component doesn't want my .js script to run the login box showing. (here my js code)

$(document).ready(function Popup() {

$('a.login-window').click(function() {

//Getting the variable's value from a link

var loginBox = $(this).attr('href');

//Fade in the Popup

$(loginBox).fadeIn(300);

//Set the center alignment padding + border see css style

var popMargTop = ($(loginBox).height() + 24) / 2;

var popMargLeft = ($(loginBox).width() + 24) / 2;

$(loginBox).css({

'margin-top' : -popMargTop,

'margin-left' : -popMargLeft

});

// Add the mask to body

$('body').append('<div id="mask"></div>');

$('#mask').fadeIn(300);

return false;

});

// When clicking on the button close or the mask layer the popup closed

$('a.close, #mask').live('click', function() {

$('#mask , .login-popup').fadeOut(300 , function() {

$('#mask').remove();

});

return false;

});

});

(in html you can call a script on the page you are in, angular2 has this in it's index.html but the problem is it gives errors because it wants to run the script as soon as the page loads, not when the button is clicked. Does my app.component has something similar to call external scripts when something is clicked?)

Neither can you refer to an id that's right below it using # with links (check my code below)... why is Angular being so tough :'(

We are not allowed to use anything like ng2-popup, ng2-bootstrap or anything bootstrap related, since we have our own styling and classes.

here my code to give you an idea of the navigation and the popup i currently have.

 @Component({

selector: 'ls-app',

styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],

template: `

<header id="header">

<nav role='navigation' class="main-nav" id="main-nav" >

<ul id="main-nav-list" >

<div class="navgroup">

<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>

</div>

<div class="navgroup">

<li>

<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>

</li>

<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a>

</li>

<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join- league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a>

</li>

</div>

<div class="navgroup login">

<div class="add-button" dropdown [dropdownToggle]="false">

<div (click)="toggleDropdown()" >+</div>

<ul class="dropdown" *ngIf="showDropdown" >

<a (click)="toggleDropdown()" [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>

<a (click)="toggleDropdown()" [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>

<a (click)="toggleDropdown()" [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>

<a (click)="toggleDropdown()" href=""><li><i class="fa fa-user-plus fa-2"></i>Shop</li></a>

<a (click)="toggleDropdown()" href=""><li><i class="fa fa-user-plus fa-2"></i>Log out</li></a>

</ul>

</div>

<li><a class="navtitle loginnav login-window" (click)="#login-box" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>

</div>

</ul>

</nav>

</header>

<div id="login-box" class="login-popup">

<!--<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>-->

<form method="post" class="signin" action="#">

<div class="form-group">

<button class="btn btn-block facebook-login"><img id="facebook_icon" src="./app/img/facebook-icon.png"/><p>Log in met Facebook</p></button>

</div>

</form>

</div>

<div class="container">

<router-outlet></router-outlet>

</div>

相关阅读:
Top