inline popup scroll

inline popup scroll

by Bob Marley

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<div class="ui long test modal" >
    <div class="header">
      Profile Picture
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img class="myimage" src="https://semantic-ui.com/images/wireframe/image.png">
        <p>        
        </p>
        <img class="myimage2" src="https://semantic-ui.com/images/wireframe/image.png">
      </div>
      <div class="description">
        <div class="ui header">Modal Header</div>
        <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
        <div class="ui divider"></div>
        <img src="https://semantic-ui.com/images/wireframe/paragraph.png" class="ui wireframe image">
      </div>
    </div>
    <div class="actions">
      <div class="ui primary approve button">
        Proceed
        <i class="right...

CSS

body {
  margin: 10px;
}

JavaScript

//$.fn.dropdown.settings.forceSelection = false;
$('.long.modal')
  .modal({
  onVisible : function(){
  $('.myimage').popup({
  title : 'Hello World',
  content : 'This is my moving popup'
  }).popup('show');

  $('.myimage2').popup({
  inline:true,
  title : 'Hello World',
  content : 'This is my locked popup'
  }).popup('show');
  }
  })
  .modal('show')
;