Question

我正在尝试使用语义UI模式，但是由于某种原因，模态在窗口中一直打开，而不是与表示它的div的大小相同。

我的HTML：（此处复制的表格：Original Code）

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture <span id="myHeader"></span>
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="/images/avatar/large/chris.jpg">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>

    <hr>
</div>

我的剧本：

    // open modal
    $(".one-day").click(function(e) {
        buildModal(e);
        $('.ui.modal')
        .modal('show');
    });

    function buildModal (e) {
        myHeader.innerHTML = e.currentTarget.getAttribute('data-date');
    }

我预计它会是这样的： What I expected

但它看起来像那样： My actual result

任何想法？

Answer 1

添加CSS

/(/header/-1)|end

将id添加到你的模态div

<style>#myModal { position: relative;}</style>

语义ui模态高度行为错误

1 个答案: