我试图在一个使用HTML中的类的Angular应用程序中使用Bootstrap模式,但它不工作-它不显示为一个模式
<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>
字符串
2条答案
按热度按时间uttx8gqw1#
我不认为这是一个好主意,使用引导只与css。如果你确实绝对想这样做,你可以尝试这样做
字符串
你需要在modal上添加
show
css类,并在div上设置display: block
。但是如果没有js,你将看不到过渡,背景或关闭模型。Bootstrap建议在angular中使用https://ng-bootstrap.github.io/
huus2vyu2#
Bootstrap内置了打开和关闭modals的函数。例如,有一个按钮应该打开一个modal,在该按钮中需要一个数据切换,如
data-toggle="modal"
和modal的目标id,如data-target="#Id of the modal"
。此外,modal本身必须有一个名为“modal”的类和一个id。这个id必须与data-target相同。下面是一个modal的例子。字符串
要做到这一点,请确保在head中导入以下项
型
有关bootstrap中模态的更多信息,请访问以下链接https://getbootstrap.com/docs/4.0/components/modal/