javascript - show popup message when onclick Angular 2 - Stack Overflow

admin管理员组

文章数量:1401281

I want to show a popup message when i click on select button like "you have selected this event"

how to do in angular 2?

<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
 SELECT
</button>

I want to show a popup message when i click on select button like "you have selected this event"

how to do in angular 2?

<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
 SELECT
</button>

• javascript
• html
• angular
• typescript

Share Improve this question Follow edited Jan 28, 2020 at 10:58 Prashant Pimpale 10.7k1010 gold badges5050 silver badges8787 bronze badges asked Jan 28, 2020 at 10:50 user12106800user12106800 2

• 2 Post the related code, which value do you to show? Is there any other controls available in the html? implementation of eventSet function? what code that you have tried but not working? – Prashant Pimpale Commented Jan 28, 2020 at 10:54
• Check this:stackblitz./edit/angular-setvalidators-puzd7z – Prashant Pimpale Commented Jan 28, 2020 at 11:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can use a structural directive *ngIf to create popup, my example:

<button type="button"(click)="popup = true">
 SELECT
</button>


<div class="overlay" *ngIf="popup">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" (click)="popup = false">&times;</a>
        <div class="content">
        you have selected this event
        </div>
    </div>
</div>

some styles:

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
visibility: visible;
  opacity: 1;
}


.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
  cursor: pointer;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){

  .popup{
    width: 70%;
  }
}

https://stackblitz./edit/angular-g4rdha?file=src%2Fapp%2Fapp.ponent.ts

Hope it helps!

Add Onclick event to parent page. For popup just add a modal create with reference of a seperate page in order to customize pop up seperately.

let test= this.modalCtrl.create('popuppage',
{
    message: 'message',
    (Enter all parameters you want to pass to the pop up page)
}
,{cssClass:'settings-modal'});
 test.present();

Now you can create your pop up page named 'popuppage'as you require

May be you are looking for toaster in the screen which you can add to your project by installing third party UI library like primeNg and it is good to use.

Please look it here. https://primefaces/primeng/#/toast

本文标签： javascriptshow popup message when onclick Angular 2Stack Overflow