модальный getuikit вообще не отображается

#javascript #html #css #getuikit

Вопрос:

У меня есть следующий код: https://codepen.io/armaanm11/pen/JjJXegX

Я пробовал разные браузеры, удалял добавленные стили, но, похоже, ничего не работает. Похоже, это проблема с кнопкой или классами по умолчанию. Не уверен, что здесь происходит. Я пробовал разные браузеры, удаляя добавленные стили, но, похоже, ничего не работает. Похоже, это проблема с кнопкой или классами по умолчанию. Не уверен, что здесь происходит.

 <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">
              companyabcd@a.com
            </p>

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

и 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;
}