Unveil a portal to the identical webpage

My apologies for my English skills...

Could anyone advise me on how to display an image?

Hello, I am looking for a way to have a small window open on my site when a user clicks on the zoom icon, where I can describe a product. Any guidance on the HTML code required for this image would be appreciated.

<div class="container-fluid">
    <div class="row">

         <div class="col"> 

          <div class="product-grid">

                <div class="product-image">
                   <a class="link" href="/bags_backpacks/window/purple_double_strap_backpack.php">
                    <img alt=""  class="image" src="photo/111.jpg">     
                   </a> 

                </div>

                <div class="product-content">
                     <a class="links" href="/bags_backpacks/window/purple_double_strap_backpack.php">
                    <p class="title">Purple Double Strap Backpack</p>
                    </a>     

                </div>
                    <div class="price">$16.00</div>

                     <div class="div-zoom">

                   <span class="add-to-cart">Add to Cart</span>
                   <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;"></i>
                 </div> 
            </div>
        </div>
</div>

CSS code for adding to the cart (Add to Cart in German language...) and clicking on the zoom icon

/*  div-zoom-window   */

.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}

/*  add-to-cart    */
.add-to-cart { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}

.div-zoom i {padding-bottom: 5%; margin-left: 4%; }

I came across this thread where someone mentioned using JQuery for this, but I'm not familiar with it...

If anyone could provide assistance, I would greatly appreciate it. Thank you!

jqueryhtmlcssbootstrap-4

Answer №1

Alright, here is a step-by-step guide on how to create a zoom functionality using Bootstrap:

  1. Start by including jQuery CDN and Bootstrap JS CDN in your project.
  2. Refer to the official Bootstrap documentation on getbootstrap.com to create a modal.
  3. Implement the modal as per the documentation and trigger it using your zoom button.
  4. Add your desired content inside the modal body, such as images, text, or divs.

/*  div-zoom-fenster   */

.div-zoom { padding: 2%; padding-top: 15%; text-align: left;}

/*  zum-warenkorb    */
.zum-warenkorb { font-size: 89%; background-color: #bfbfbf; color: #ffffff; padding: 2%; margin-top: 2%; text-align: left;}

.div-zoom i {padding-bottom: 5%; margin-left: 4%; } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">

         <div class="col"> 

          <div class="product-grid">

                <div class="product-image">
                   <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <img alt=""  class="bild" src="photo/111.jpg">     
                   </a> 

                </div>

                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <p class="title">Mochila doble tirantes Violeta</p>
                    </a>     

                </div>
                    <div class="price">$16.00</div>

                     <div class="div-zoom">

                   <span class="zum-warenkorb">zum warenkorb hinzufügen</span>
                   <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
                 </div> 
            </div>
        </div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
        <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      <div class="modal-body">
        insert your content here
      </div>
      
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate files on a Windows server remotely using a Linux Apache web server by clicking on a browser link

After setting up an apache webserver on Linux Debian and successfully creating an intranet, I encountered a challenge. The intranet is designed to display tables with data from sql queries using php and mysql. However, I wanted to include a hyperlink withi ...

phphtmlapache

Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

Hey there! I encountered an issue with my website where the recaptcha isn't working on the desktop version. It's strange because I've used the same code successfully on other sites before. I attempted to fix it by creating a new recaptcha a ...

javascripthtmlcssrecaptchacaptcha

Emberjs: Developing a self-focusing button with Views/Handlebar Helpers

Currently, I am using a Handlebars helper view that utilizes Em.Button (although it's deprecated) to create a Deactivate Button. This button is designed to focus on itself when it appears and clicking it triggers the 'delete' action. Additio ...

javascriptjqueryviewember.jshandlebars.js

Using Javascript to convert numerical input in a text box into its corresponding letter grade

I have been working on this code, but I am facing some issues with displaying the result. My goal is to input a number, such as "75", click a button, and have the bottom textbox show the corresponding letter grade, starting with "C" for 70-80 range. Here i ...

javascriptphphtmlif-statement

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason. Why does the style work initially during rendering but disappear upon subs ...

cssmaterial-uinext.jsserver-side-rendering

Narrow down your search results with date range filtering in Angular Material

Seeking guidance as a newcomer to Angular Material, I am trying to implement a date range filter for a table of N results. The options in the filter select are (1 day, 5 days, 1 week, 15 days), which are populated using a variable JS vm.rangos=[ {id ...

angularjshtmlcssangular

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Verify whether a group of div elements overlaps a fixed div while scrolling

I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date i ...

javascriptjquerycss

Button Click Does Not Trigger Bootstrap Modal Display

This is a sample Bootstrap document that includes JS and CSS files to display a list properly in Bootstrap. However, the Modal does not appear when clicking on Launch demo modal. No JavaScript errors are displayed in the Console. Can you help troubleshoot ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

Adding the !important rule in React inline CSS effortlessly

Is there a way to include !important in my inline CSS property without disrupting the entire style? import React from "react"; export default class Todo extends React.Component { render() { const {text} = this.props; const cardStyl ...

cssreactjs

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Is SCSS automatically compiled into CSS by VSCode?

In the tutorial I followed, the instructor mentioned clicking a button at the bottom of the window to create a CSS file with the 'Live Sass Compiler' extension in VSCode. However, despite following the instructions, the compilation does not seem ...

htmlsass

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

After successfully creating a password redirect page where entering the correct password redirects you to another URL (psswrdtest.tumblr.com with the password as correctpsswrd, redirecting to google.com*), I attempted to improve it by making the password p ...

javascriptjqueryhtmlcsspasswords

Submitting form data including file uploads using AJAX

Currently, the file is being sent via AJAX using the following code: var fd = new FormData(); //additional actions to include files var xhr = new XMLHttpRequest(); xhr.open('POST', '/Upload/' + ID); xhr.send(fd); In ...

c#javascriptjqueryajaxasp.net-mvc

Alternative method to jQuery's "find" selector

$('.wrapper a').filter('a'); //returns all anchors I am trying to find a way to select all anchor elements using a specific selector. The issue is that the find method only looks at descendants, so I need an alternative solution. Any s ...

javascriptjquery

Iterate through jQuery loop, clear styles, and iterate again

My goal is to animate the "top" position of an HTML element and then reset the style once the function has finished running before starting the loop again. I'm not an expert in this field, and I believe there must be a more efficient way to achieve t ...

jqueryloopsjquery-animatereset

Utilize a SCSS class defined in one file within a different SCSS file

In my React project, I have a day/night theme button that changes the main body color in the App.scss. It's a simple setup using body.light and body.dark. However, I need to also change the text color in the navigation bar, which is located in a diffe ...

cssreactjssass

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

I am attempting to utilize the getUserMedia function in IE 11 with the help of the temasys plugin. However, IE does not support the MediaStream instance returned by getUserMedia. Below is a snippet of my code: import React from 'react' import { ...

javascripthtmlreactjsinternet-explorer-11temasys

Is there a CSS3-compatible CSS parser available in C/C++?

Are there any C/C++ CSS parsers that currently support CSS3? I have come across a few, but none of them seem to offer full CSS3 compatibility. ...

c++cparsingcss

What is the method for emphasizing links in the navigation bar with Bootstrap 3?

I am currently working on applying custom CSS styles to the Bootstrap navbar in order to have the link text underlined when hovered over, with a fade-in effect as well. To see what I have accomplished so far, you can view it here: https://jsfiddle.net/xfd ...

htmlcsstwitter-bootstrap