javascript - Modal window that takes over browser's scrollbar like on Pinterest -


I have a modal window that will display content at the height of the browser window, so I need to create a modal window On the scrollbar of the brush as we see on Pinterest. In addition, clicking on the image can translate the image from where it is in the model window.

Note how the model opens the scrollbar

Problem: How do I create a single modal window (moves to scrollbar) and image animation ? I know that the browser changes the URL in the address bar when the modal window appears, but you will see that the page is not actually changing. I am able to do this using backbone.js so that there is no worry.

HTML code 

  & lt; Div id = "showModal" & gt; Click me! & Lt; / Div & gt; & Lt; Div class = "model" & gt; & Lt; Div class = "modal_item" & gt; & Lt; Div class = "modal_photo_container" & gt; & Lt; Img src = "img / posts / original / 1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpg" class = "modal_photo" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  JS code   
  $ ('# showModal'). Click (function () {$ ('. Modal'). Show ();}); First of all, I suggest an html structure for one of my models which is similar to this one:  
   overflow: hidden  to  body , and, by any means,  Display: Go to Block  to  .modal-container .  .modal-container  will contain the same CSS:  
  .modal-container {display: none; Overflow-y: scroll up; Status: fixed; Top: 0; Correct: 0; Height: 100%; Width: 100%; } See an example of working on

Comments

Post a Comment