getuikit modal not showing at all

Question

I have the following code: https://codepen.io/armaanm11/pen/JjJXegX

I have tried different browsers, deleting my added styles but nothing seems to work. It seems like an issue with the button or the default classes. Not sure what is going on here. I have tried different browsers, deleting my added styles but nothing seems to work. It seems like an issue with the button or the default classes. Not sure what is going on here.

<div>
  <a class="uk-button uk-button-default" href="#companyDetails" uk-toggle>Open</a>

  <div id="companyDetails" class="uk-modal-container" data-uk-modal>
    <div class="uk-modal-dialog uk-modal-body" data-uk-modal>

      <button className="darken" type="button" data-uk-close></button>
      <h2 className="companyName">companyabcd</h2>
      <div className="companyModal">

        <div className="row justify-content-between">
          <div className="col-7">
            <h6 className="companyParam">
              Description
            </h6>
            <p className="companyContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          </div>
          <div className="col-3">
            <h6 className="companyParam">
              Phone number
            </h6>
            <p className="companyContent">
              +62 8777 40 20008
            </p>

            <h6 className="companyParam">
              Email
            </h6>
            <p className="companyContent">
              [email protected]
            </p>

            <h6 className="companyParam">
              Website
            </h6>
            <p className="companyContent">
              www.companyabcd.com
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

and css:

@import url(https://fonts.googleapis.com/css?family=Poppins);

.companyName {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-size: 33px;
  line-height: 140%;
  letter-spacing: 0.25px;
  padding-bottom: 25px;
}

.companyContent {
  font-family: Poppins;
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 155%;
  padding-bottom: 15px;

}

.companyParam {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 140%;
    letter-spacing: 0.25px;
}

.uk-modal-dialog {
  border-radius: 20px;
  padding: 50px;
}


.companyModal {
  padding: 10px;
}

.darken {
  filter: brightness(0.1);
  position: absolute;
  top: 45px;
  right: 45px;
}

Answer 1

You haven't added the UIkit JS to your pen. If you do this it will work.