GetUIKit modal完全不显示问题排查与解决方案求助

UIkit模态框无法触发显示的问题原因及修复方案 #

问题原因 #

• 模态框根容器类使用错误：UIkit规定模态框最外层容器必须使用uk-modal类，当前代码用的uk-modal-container是模态框内部布局类，不能作为根容器类使用。
• 重复添加data-uk-modal属性：该属性仅需要添加在最外层的模态框根容器上，代码在内部uk-modal-dialog层重复添加了该属性，会导致组件初始化冲突。
• 属性写法不兼容：所有HTML标签上写的className是React框架专属的类名属性写法，原生HTML中应该使用class属性，否则浏览器无法正确识别类名。
• 触发属性写法不规范：建议将uk-toggle统一写为data-uk-toggle，和其他UIkit属性写法保持一致，避免部分场景下识别异常。

修正后的完整HTML代码 #

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

  <div id="companyDetails" class="uk-modal" data-uk-modal>
    <div class="uk-modal-container">
      <div class="uk-modal-dialog uk-modal-body">
        <button class="darken" type="button" data-uk-close></button>
        <h2 class="companyName">companyabcd</h2>
        <div class="companyModal">
          <div class="row justify-content-between">
            <div class="col-7">
              <h6 class="companyParam">
                Description
              </h6>
              <p class="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 class="col-3">
              <h6 class="companyParam">
                Phone number
              </h6>
              <p class="companyContent">
                +62 8777 40 20008
              </p>
              <h6 class="companyParam">
                Email
              </h6>
              <p class="companyContent">
                companyabcd@a.com
              </p>
              <h6 class="companyParam">
                Website
              </h6>
              <p class="companyContent">
                www.companyabcd.com
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

补充说明 #

原有CSS代码不需要修改，按上述HTML调整后即可正常触发模态框显示。

内容的提问来源于stack exchange，提问作者Osli1110