Fenêtre modulaire qui reprend la barre de défilement du navigateur comme sur Pinterest

J'ai une fenêtre modale qui affichera plus longtemps le contenu que la hauteur de la fenêtre du navigateur, alors j'ai besoin de créer une fenêtre modal qui reprend la barre de défilement du navigateur comme celle que nous voyons sur Pinterest. En outre, en cliquant sur l'image, cette image se traduira par l'endroit où elle se trouve dans la fenêtre modal.

Notez comment l'ouverture du mode modifie les barres de défilement

Problème: Comment puis-je créer la même fenêtre modal (prend la barre de défilement) et l'animation de l'image? Je sais que l'URL dans la barre d'adresse du navigateur change lorsque la fenêtre modal apparaît, mais vous remarquerez que la page n'a pas vraiment changé. Je peux le faire en utilisant backbone.js donc pas de soucis.

• Collecte imbriquée
• Backbone.js collection get vars
• Utilisation de bootstrap-modal comme vue Backbone.js
• Combinaison d3.js et backbone.js
• Backbone.js gestion de l'état / initialisation de la vue basée sur le fragment d'URL

SEGPORTAvilla Marco MarcoFea MarcoFea MarcoFea Traea Marco Marco Marco Marco Marco Marco Marco Chamel ChamonéAAOachos Chamonéier

<div id="showModal">Click me!</div> <div class="modal"> <div class="modal_item"> <div class="modal_photo_container"> <img src="img/posts/original/1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpg" class="modal_photo"> </div> </div> </div> 

Code JS

 $('#showModal').click(function() { $('.modal').show(); }); 

• Backbone.js route option paramètre
• Envoyer un jeton avec chaque demande de synchronisation de backbone
• Frontend javascript frameworks avec node.js
• Backbone.js – Meilleure pratique pour la mise en œuvre de la recherche "instantanée"
• Une application Backbone.js peut-elle être progressivement améliorée et naviguer par les moteurs de recherche?

  <div class="modal-container"> <div class="modal"> </div> </div> 

 .modal-container { display: none; overflow-y: scroll; position: fixed; top: 0; right: 0; height: 100%; width: 100%; }