Angular: Can I do css on alert and confirm function?-CodePudding

I want to do css on them the problem is they are inside a function and I do not know how I access them.

for example:

updateUser() {
      this.usersService.UpdateUser(this.user.id, this.user)
      .subscribe(() => {
          alert("Password changed! You are taken to the login page")
          this.router.navigate(['login']);
        },(e)=> {
          this.errors = [];
          if (e.error.errors.Password) {
            this.errors.push(e.error.errors.Password);
          } 
        }
      )
    }

Here in the function I want to do css on the alert I have:

alert("Password changed! You are taken to the login page")

also confirm:

  deleteUser(id:string,user:User){
    if(confirm(`Are you sure you want to delete user ${user.userName}`)){
      this.usersService.DeleteUser(id)
      .subscribe(
        () =>{
          this.router.navigate(['login']);
        }
      )
    }
  }

Here in the function I want to do css on the confirm I have:

   if(confirm(`Are you sure you want to delete user ${user.userName}`)){

CodePudding user response：

It's not possible to style an alert() or confirm().

That's an HTML Code

<div style="position:absolute; width: 200xp; height:50px;background-color:white; border-radius:10p;padding:10px;"><button onclick="TheFunctionAfterConfirm()">Confirm</button>
<button onclick="TheFunctionAfterDisagree()">Disagree</button><div>

An alternat way could be to use an library like sweetalert2 (https://sweetalert2.github.io/#examples).

If there are problems, add an import to your main script.