0

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>
Improve this question
1
  • 1
    There's not enough information here to help you diagnose the issue. I'd suggest you start debugging by opening devtools and checking for errors Commented Jan 3, 2024 at 12:02

3 Answers 3

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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/

Improve this answer

1 Comment

I tried this method but issue remain same still its not showing any dialog
0 
"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"],
"scripts": [
             "node_modules/bootstrap/dist/js/bootstrap.min.js",
             "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]

Import bootstrap into angular.json file

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.