打开页面加载模式Angular4 [英] Open a modal on page load Angular4

问题描述

我希望能够在页面加载后立即看到模式打开.我看到一个灰色的模态背景，但模态本身不见了.

I want to be able to see a modal open as soon as the page loads. I see a gray modal-backdrop, but the modal itself is missing.

这是我的html:

<div id="content-container">
  <div class="content">
    <div class="row">
      <div class="column" style="background-color: #EFF3F6;"> <h1 class = "pageTitle">Welcome!</h1>

        <div>
          <button [routerLink]="['/myPendingRequests']">Enter ePACS</button>
        </div>
      </div>
    </div>
    <div id="skipContent" tabindex="-1″>
    </div>
  </div>
</div>
<button id="openModal" #openModal [hidden]="true" 
 data-toggle="modal" data-target="#openModal"></button>

相同组件中的模态:

  <!-- Remove Modal -->
  <div class="openModal">
    <div class="modal left fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content" id="whiteColor">

              <div class="modal-header">
                <p> This is my modal</p>
              </div>

              <div class="modal-body">
              </div>
          </div>
        </div>
      </div>
  </div>

谢谢！

推荐答案

这可以通过以下简单实现:

This can be achieved simply by the following:

<div class="modal show" id="myModal" role="dialog" data-backdrop="static">
 <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Title of my Modal</h4>
    </div>
    <div class="modal-body">
       <p> Here is some text for the modal </p>
      <div class="buttonSelect">
        <button id="cancelConsentButton" class="btn btn success" onclick = "$('.modal').removeClass('show').addClass('fade');">Cancel</button>
        <button id="acceptConsentButton" class="btn btn success" onclick = "$('.modal').removeClass('show').addClass('fade');">I Agree</button>
      </div>

    </div>
</div>

这篇关于打开页面加载模式Angular4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！