意味uiのモーダル高さが正しく機能しない

Question

意味UIモーダルを使用しようとしていますが、何らかの理由でモーダルがウィンドウ内でdonwを開いていますが、それを表す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

あなたのモーダルのdiv

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

にIDを追加するCSS

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

を追加します。