css 点击时，angular 8上未显示引导模式

lztngnrs 于 8个月前发布在 Angular

关注(0)|答案(3)|浏览(95)

我试图在一个Angular 应用程序中显示一个按钮点击模态。我安装了 Bootstrap 并编写了 Bootstrap 教程中指定的代码。该模态在点击时可用，因为它在检查浏览器的html时可用，但在浏览器上不显示。然而，将模态元素的显示属性从块更改为内容会显示该模态。请在下面找到当前代码。

<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>

字符串
模态显示在正常的html和css中，而不是角

css

来源：https://stackoverflow.com/questions/59590391/bootstrap-modal-is-not-shown-on-angular-8-on-click

3条答案

按热度按时间

ibrsph3r1#

试试下面的代码
在您的HTML文件中

<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>

字符串
在TS（组件）文件中
create 2方法

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";
  }
}

型
希望这对你有帮助
如果你有任何疑问，请告诉我
谢谢

赞(0）回复(0）举报 8个月前

axzmvihb2#

将下面的代码添加到index.html文件->的body部分中。

<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>

字符串

赞(0）回复(0）举报 8个月前

m4pnthwp3#

创建以下类

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

字符串

赞(0）回复(0）举报 8个月前

我来回答

css 点击时，angular 8上未显示引导模式

3条答案

相关问题

热门标签

最新问答