如何从框中的链接而不是 HTML5 中的新选项卡或新窗口打开新页面？

Question

I was searching for a tutorial or code that will help to show data with image in a box "instead of new window" or "instead of same window" .

1. Hyper link will open the page in a box or frame but parent html will be remain in background, when the box will be closed the parent window of HTML will be shown again instead of reloading.

I do not know what is called this process and I have searched for tutorials but failed to find as I wanted.

I want to do something like this link http://photoswipe.com/ shows when image is clicked. I am new and help please. Thank you.

Answer 1

It's called a modal or overlay. When used for images it's often called a lightbox .

Here is a rough demo using jQuery. Basically you have an element that contains thumbnails of your images. Those elements have a data- attribute that points to a larger sized image. When the user clicks a thumbnail you use JavaScript to read the value of the data- attribute, create an image element and insert it into the modal/overlay. The modal/overlay will be a positioned element using fixed or absolute positioning. When the user closes the modal the container element for the image is emptied so you do not have two images in the modal the next time an image is clicked and the modal/overlay is opened.

 var $overlay = $( '.photo-box-overlay' ); var $overlayIMG = $( '.photo-box-img' ); $( '.photo-box' ).on( 'click', 'img', function ( e ) { var $target = $( e.target ); var $img = $( '<img/>', { src: $target.attr( 'data-large' ) } ); $overlayIMG.append( $img ); $overlay.css( 'display', 'block' ); } ); $( '.photo-box-close' ).on( 'click', function ( e ) { $overlay.css( 'display', 'none' ); $overlayIMG.empty(); } );

 .photo-box-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; padding: 2rem; background-color: rgba( 0, 0, 0, 0.8 ); } .photo-box-close { position: absolute; top: 10px; right: 10px; height: 30px; width: 30px; font-size: 30px; line-height: 30px; color: #f1f1f1; cursor: pointer; } .photo-box-overlay img { max-width: 100%; display: block; height: auto; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="photo-box"> <img src="https://unsplash.it/300/150?image=85" data-large="https://unsplash.it/900/450?image=85"> <img src="https://unsplash.it/300/150?image=100" data-large="https://unsplash.it/900/450?image=100"> <img src="https://unsplash.it/300/150?image=125" data-large="https://unsplash.it/900/450?image=125"> </div> <div class="photo-box-overlay"> <div class="photo-box-close">&times;</div> <div class="photo-box-img"></div> </div>

This is a quick demo aimed at illustrating what is required to create the functionality you're looking for. It most likely is not production ready and can/should be improved upon.

Answer 2

I'm changing my answer sorry. As you want to dynamicly show the picture, you are goin to create data- attr to element that includes links and then do jquery do put them into the box as you suggesting. Here is the link of DEMO