1

Sorry for my English...

My code

<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>
                  <a href="#">
                    <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
                    </a>
                </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">
                             put here, whaterver you want
                        </div>
               </div>
            </div>    
        </div>
     </div>
</div>

I to want the modal window open beside from original image.

How the Site to show

I tried with flex in <style>,

.modal-content {
   /* Styles to make the modal visible */
  display: flex !important;
  opacity: 1 !important;
  margin-top: 500px;

}
.modal-dialog {
   justify-content: left !important;
}
.modal-content {
   width: left !important;
}

But because of modal open per default at the top, to come this image,

enter image description here

I to want which modal centred the open window and it open besides from the original image.

Can please someone help me with this problem, Thanks!

5
  • if you are using modal in your project, so why not bootstrap modal? Apr 15, 2020 at 15:59
  • Thanks for your answer!, sorry but not Understand what you mean... can you please explain...
    – jdgs56z
    Apr 15, 2020 at 16:03
  • are you using bootstrap 4? If yes, bootstrap gives you modal component, for more info visit getbootstrap.com/docs/4.4/components/modal Apr 15, 2020 at 16:06
  • Thanks but before I showed this Page and not found a solution for my problem...
    – jdgs56z
    Apr 15, 2020 at 16:11
  • what do you want to say? do you want to ignore bootstrap modal and want a focus on your problem? Apr 15, 2020 at 16:18

1 Answer 1

1

What you want is not easily achievable, as Bootstrap modal wasn't developed for this purpose. That's not to say it can't be done, but rather that there are better UX solutions than trying to crowbar a modal into this UI behavior.

That's because Bootstrap modal is designed to completely ignore the layout of the page over which it renders and to occupy the entire viewport. It also disables scrolling on the page while it's open and it creates a backdrop at <body> level which covers the entire page.

A better approach for your use case would be to dynamically inject the product into the modal and display it there.

Another possible solution is to use a Bootstrap popover (which was pretty much designed for your use case - a "modal" relative to a particular element). Think of it as the result of breeding a tooltip with a modal. But the more it is like a modal, the bigger UI problems it's going to generate.

In my opinion, popovers break a lot of UX best practice principles and typically require a lot of fixes/workarounds for various device + platform combos. Overall they tend to make your application more brittle, your code less flexible, so I strongly advise against using them.

As far as I'm concerned, the only decent solution is to disable popovers on mobile devices and provide a mobile-friendly alternative (accordion, modal, drawer). But, if you're gonna do that, why not try to be consistent and provide the same alternative on desktops as well, adapted to the extra available space?

If you need help implementing either solution, please consult Bootstrap documentation for a) dynamically injecting content into modals or b) using popovers.

If you run into any trouble, I suggest you ask a new question focusing that specific problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.