Onmouseover show popup with preview page.

HyperXnl

Good morning all,

I've been running into a problem for two weekends now.

I have a datatable in which all kinds of information is loaded. Now I want in the last column, where I have an icon for mutate, details, edit and delete, that when I go over the details icon (code line 53) I get a popup showing the page I would normally open. This is because I can then view information more quickly, open a page instead of each product. But how do I get it done?

Here my code part:

        <div class="row">
            <div class="col-md-12">

                <div class="card">

                    <div class="card-header"><!-- <i class="fa fa-table"></i> -->Overzicht
                            <a href="../producten/product_add.php" class="btn btn-success btn-sm-custom pull-right" title="Voeg een nieuw product toe.">Maak een nieuw artikel aan</a>
                    </div>

                    <div class="card-body">


                        <div class="table-responsive"><p>

                            <table id="example" class="table table-bordered">

                                <thead>

                                <tr>

                                    <th><center>PLU</center></th>
                                    <th>Product</th>
                                    <th class="text-center" style="color: white"><strong>Voorraad</strong></th>
                                    <th><center>Opslaglocatie</center></th>
                                    <th><center>Fabrikant</center></th>
                                    <th><center>VPE</center></th>
                                    <th><center>Productiejaar</center></th>
                                    <th><center>Status</center></th>
                                    <th style="width: 120px"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <?php foreach ($alle_producten as $producten):?>
                                <tr>

                                    <td><center><?php echo remove_junk($producten['plu']); ?></center></td>
                                    <td><?php echo remove_junk($producten['product']); ?></center></td>
                                    <td class="text-center" style="color: white"><strong><?php echo remove_junk($producten['voorraad']); ?></strong></td>
                                    <td ><center><?php echo remove_junk($producten['locatie']); ?></center></td>
                                    <td><center><?php echo remove_junk($producten['fabrikant']); ?></center></td>
                                    <td><center><?php echo remove_junk($producten['vpe']); ?></center></td>
                                    <td><center><?php echo remove_junk($producten['jaar']); ?></center></td>
                                    <td><center><?php if ($producten["status"] === 'Actief'): ?>
                                                <span class="badge badge-success"><?php echo "Actief"; ?></span>
                                            <?php else: ?>
                                                <span class="badge badge-danger"><?php echo "Inactief"; ?></span>
                                            <?php endif;?></center></td>

                                    <td><center>
                                            <a href="product_muteren.php?id=<?php echo (int)$producten['id'];?>" title="Muteren">
                                                <span class="badge badge-success"><i class="icon-refresh"></i></span>
                                            </a>
                                           <a href="product_detail.php?id=<?php echo (int)$producten['id'];?>" title="Details">
                                                <span class="badge badge-info"><i class="icon-info"></i></span>
                                            </a>
                                            <a href="product_edit.php?id=<?php echo (int)$producten['id'];?>" title="Bewerken">
                                                <span class="badge badge-warning"><i class="icon-pencil"></i></span>
                                            </a>
                                            <a href="product_delete.php?id=<?php echo (int)$producten['id'];?>" onClick="return confirm('Weet je zeker dat je <?php echo remove_junk($producten['product']); ?> definitief wilt verwijderen?')" title="Verwijderen">
                                                <span class="badge badge-danger"><i class="icon-trash"></i></span>
                                            </a>
                                        </center></td>
                                </tr>
                                <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

colin

Is this using Editor? If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

HyperXnl

Hi @colin

Here is a dummy page.. hope u can help me out.
https://pyrobase.nl/producten/dummy.php

HyperXnl

What i already tested was but some to the app-style.css

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

And this code after the clossing the A href

<div class="box">
    <embed src="product_detail_pop.php?id=<?php echo (int)$producten['id'];?>" width = "500px" height = "500px">
    </embed>
  </div> 

but that did not give the desired result

see here its going crazy whahahaha

https://pyrobase.nl/producten/dummy2.php

allan

Your easiest option might be to use a library such as Fancybox. Specifically see their "Auto-resize iframe based on content" demo.

In short, what you need to do to achieve what you are looking for is load the target page into an iframe and display that as a modal over your existing page. That's what a library such as Fancybox will do for you, or you can write your own.

Allan