CODEWITHSUNDEEP
javascripthtmlcssangular
V5NEXT
V5NEXT

Reputation: 2077

Bootstrap modal is not shown on angular 8 on click

I am trying to display a modal on a button click in an angular application. I installed bootstrap and wrote the code specified in the bootstrap tutorial. The modal is available on click as its available during inspecting the html of browser but not showing on the browser. However changing the modal elements display property from block to contents displays the modal. Please find the current code below.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                      Launch demo modal
                    </button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The modal is being displayed in normal html and css not in angular

Upvotes: 3

Views: 21177

Answers (3)

Daner
Daner

Reputation: 91

Override the following class

.fade.modal {
   opacity: unset !important;
}

Upvotes: 0

amos moronya
amos moronya

Reputation: 1

Add the code below in your index.html file -> within the body section.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

Upvotes: 0

kushal shah
kushal shah

Reputation: 863

Try with below code

IN your HTML file

<button type="button" class="btn btn-info btn-lg" (click)="openModal()">click to open</button>
    <div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">
         <div class="modal-dialog" role="document">
               <div class="modal-content">
                     <div class="modal-header">
                           <h4 class="modal-title">Model Title</h4>
                           <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>
                         </div>
                <div class="modal-body">
                           <p>Model body text</p>
                         </div>
                     <div class="modal-footer">
                           <button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>
                         </div>
            </div>
             </div>
 </div>

In your TS(component) file

create 2 method

 import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styles:[
    `.modal{background: rgba(0,0,0, .5);`
  ]
})
export class AppComponent implements OnInit {
display = "none";
  ngOnInit() {
   }
openModal() {
    this.display = "block";
  }
  onCloseHandled() {
    this.display = "none";
  }
}

Hope this will help you

let me know if you have any query

thanks

Upvotes: 18

Related Questions