Question 313166 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap modal not working in Angular application

I am trying to use a Bootstrap modal in an Angular application using classes in HTML, but it not working – its not showing as a modal

<div class="modal text-center" *ngIf="showmodal" tabindex="-1" id="withScrollExampleModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title fw-normal">Basic dialogue title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa-light fa-circle-xmark"></i>
        </button>
      </div>
      <div class="modal-body f-14">
        <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.
        </p>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
        <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Bootstrap has build in functions to open and close modals.
    For example there is a button that should open a modal, in that button there needs to be a data toggle like data-toggle="modal" and the target id of the modal like data-target="#Id of the modal"
    Further the modal itself hass to have a class called "modal" and a id. This id has to be the same as the data-target.
    Here is an example of a modal.

    <!-- Button trigger modal -->
<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>

    For this to work make sure to import the following items in the head

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    For more information on modals in bootstrap go to the following link
    https://getbootstrap.com/docs/4.0/components/modal/

    Login or Signup to reply.
  2. 0

    I don’t think it’s a good idea to use bootstrap with just css. If you do absolutely want to do that, you can try this

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal text-center show" tabindex="-1" id="withScrollExampleModal" style="display: block">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title fw-normal">Basic dialogue title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa-light fa-circle-xmark"></i>
        </button>
      </div>
      <div class="modal-body f-14">
        <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.
        </p>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
        <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
      </div>
    </div>
  </div>
</div>

    You need to add the show css class on the modal and also set display: block on that div. But without the js, you won’t see the transitions, the backdrop or dismiss the model.

    Bootstrap suggests using https://ng-bootstrap.github.io/ if you’re using it in angular

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search