semantic ui modal height acts wrong

Question

I am trying to use semantic UI modal, but from some reason the modal is opening all the way donw in the window, instead of being the same size of the div that represents it.

My HTML: (Copied form here: 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>

My Script:

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

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

I expected it to look like that: What I expected

But instead it looks like that: My actual result

Any Ideas?

Answer 1

Add CSS

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

add id to your modal div

<div id="myModal" class="ui modal"></div>