点击时在Angular 8上未显示Bootstrap模态窗口

Question

点击时在Angular 8上未显示Bootstrap模态窗口

3

我试图在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中显示，而不是在Angular中。

- V5NEXT

这是您问题的答案吗？https://dev59.com/qVsW5IYBdhLWcg3wFj9p#42597422? - kushal shah

这是针对一个隐藏按钮的，当我点击该按钮时，模态框会被渲染到DOM中，但不会显示出来。 - V5NEXT

3个回答

0

请将以下代码添加到您的index.html文件中->在body部分内。

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

- amos moronya

1

你的回答可以通过提供额外的支持信息得到改善。请[编辑]以添加进一步细节，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

0

覆盖以下类

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

- Daner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kushal shah · Accepted Answer

尝试使用以下代码

在你的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（组件）文件中，创建 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";
  }
}

希望这能对你有所帮助

如果你有任何疑问，请告诉我

谢谢