title: How to create a modal that shows blog-posts in blogger homepage?
body: <p>I have a blogger website; in the homepage (index page) there are blog-posts (thumbnail, title, snippets and "view" button). I need to create a modal that pops-up when the "view" button is clicked. It should show blog-post title, image thumbnail and some other post details.
  How to achieve that please ?</p>
  
  <p>I tried java script but the modal shows only one blog-post when click on each "view" button.</p>
  
  <p><img src="https://i.stack.imgur.com/Hfs1Q.png" alt="enter image description here">  </p>
  
  <pre><code>&lt;link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css' rel='stylesheet'/&gt;
  &lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'/&gt;
  &lt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js'/&gt;
  
  &lt;button type="button" class="btn btn-info" data-toggle="modal" data-target="#Shop"&gt;view&lt;/button&gt;
  
  &lt;div id="Shop" aria-hidden="true" aria-labelledby="Shop" class="modal fade in" role="dialog" tabindex="-1" display="block"&gt;
  
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content simpleCart_shelfItem"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button aria-hidden="true" class="close" data-dismiss="modal" type="button"&gt;×&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;&lt;a expr:href='data:post.href'&gt;&lt;data:post.title/&gt;&lt;/a&gt;&lt;/h4&gt;
          &lt;/div&gt;  
        &lt;/div&gt; 
      &lt;/div&gt; 
  
  &lt;script&gt;
  $('#Shop').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var title = &amp;quot;&lt;data:post.title/&gt;&amp;quot;;
    var modal = $(this)
    modal.find('.modal-title').text(title)
  })
  &lt;/script&gt;
  </code></pre>