Open a modal on page load Angular4

Question

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.

Here is my 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>

Modal in the same component:

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

Thanks!!

Tyr https://ng-bootstrap.github.io/#/components/modal/examples — jcroll, Jul 17 '18 at 20:05
modal opening should be implemented inside a service so that you can open and close the modal. Unless you want the modal displayed always, in that case, you can just hard code the css in body and remove the button. This way you can trigger the library to not hide the modal. — windmaomao, Jul 17 '18 at 20:05
I am trying to make a consent form, and the user can not do anything else on the page unles they accept the terms and services — J Hogan, Jul 18 '18 at 11:52

score 0 · Answer 1 · answered Jul 18 '18 at 18:40

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>

Open a modal on page load Angular4

1 Answers1

Linked