Printjs and Modal

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css">
<div id="modaldiv" class="ui modal">
  <button type="ui button" id="button" onclick="printJS({ printable: 
       'modaldiv',type: 'html',showModal:true, printContainer: 
        true,copyTagClasses: true})">
         Print
  </button>
  <button type="ui button" id="button" onclick="printJS({ printable: 
        'content',type: 'html',showModal:true, printContainer: 
        true,copyTagClasses: true})">
      Print2
  </button>
  
  <i class="close icon"></i>

  <div class="header">
    Profile Picture
  </div>
  
  
  
  
  
  
  
  <div class="content" id="content">
    <div class="ui medium image">
      <img src="img/bmw5.png">
    </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="#" 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 button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

<a class="item ui button" id="logIn">
  <i class="user icon"></i> Log In 
</a>

JavaScript

$(document).ready(function(){
  $('#logIn').click(function(){
    $('#modaldiv').modal('show');    
  });
});

// Issue printing modal is note related to printJS. The modal has a negative margin-top applied style.