Div-Box ähnlich wie modal einblenden

W

Werner S

Mitglied
Grüß euch,

man kennt ja die Modal Box aus Bootstrap die sich bei Klick auf einen Button einblendet.
So ähnlich wollte ich mir was bauen. Bei Klick auf einen Link/Button, wird ein DIV eingeblendet welches den ganzen Desktop ausfüllt.

Der entsprechende Link befindet sich in einem <td> Klicke ich auf den Link, wird das DIV zwar eingeblendet, allerdings nur innerhalb des <td> und ich muss Seitlich Srcollen.

Wie bekomme ich das hin das es über den ganzen Desktop angezeigt wird?

Meine Vermutung das es lediglich am CSS Code liegt, falsch Positioniert oder so was.

HTML: 
<td class="row justify-content-left l-padding">
    <a href="#" class="userbox-search">
        <i class="fa fa-eye"></i>
        Show
    </a>
    <div class="user-box">
        <a href="#" class="userbox-close">Schließen</a>
        <div class="container">
            <div class="row">
                Testinhalt
            </div>
        </div>
    </div>
</td>


CSS: 
.user-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00aced;
    display: none;
}
.user-box .userbox-close {
    float: right;
    margin: 36px 40px 145px 0;
}

Javascript: 
$(document).ready(function () {
    $(document).on('click', '.userbox-close', function () {
        $('.user-box').fadeOut();
    });
    $(document).on('click', '.userbox-search', function () {
        $('.user-box').fadeIn();
    });
});
 
Zuletzt bearbeitet:
ohne zu testen würde ich die Css so ändern.
CSS: 
.user-box {
    position: fixed;
    top: 50px;
    left: 50px;
    width: calc(100% - 100px);
    height: calc(100vh - 100px);
    background: #00aced;
    display: none;
}
Dann sollte das modal von allen Seiten 50px entfernt sein.
Warum hast du das Modal den in der Tabelle?
Das könntest du da auch herausnehmen und außerhalb der Tabelle einfügen.
 
Zurück
Oben Unten