mehrere draggable Modale gleichzeitig

sfthbara · 27. Januar 2022

Hallo zusammen,

was wäre denn der Ansatz um mehrere Modale gleichzeitig draggable zu machen. Also damit zwei oder mehr Modale auf dem Bildschirm gleichzeitig verschiebbar sind. Ich verwende dieses Beispiel: https://jsfiddle.net/ntLpg6hw/11/ mit einem Modal.

Vielen Dank für eure Tipps

Sempervivum · 28. Januar 2022

Bootstrap unterstützt das gleichzeitige Anzeigen von mehreren Modalen nicht:

https://getbootstrap.com/docs/…al/#toggle-between-modals

Zitat

Please note multiple modals cannot be open at the same time—this method simply toggles between two separate modals.

Man findet diverse Tricks, um diese Beschränkung zu umgehen, z. B. hier:

https://stackoverflow.com/ques…1/multiple-modals-overlay

aber ich würde das nicht empfehlen. Besser selber Hand anlegen und die Modale erzeugen.

sfthbara · 29. Januar 2022

Danke,

ich schau mal wie ich das umsetze. Vorher ist mir jedoch aufgefallen, nachdem ich 3 Modale wie aus der ursprünglichen Fiddle-Version in mein Webseiten-Projekt ein eingefügt habe, dass die Eigenschaft auf Buttons im Hintergrund verloren gegangen ist. Hätte jemand eine Idee, wieso das so ist?

Mein Modale sehen jetzt so aus wie in diesem Beispiel:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div class="ModalButtons">
<button style="color:yellow" class="btn_nav_right "><i class="fas fa-star"></i></button>
<button style="color:black" class="btn_nav_right"><i class="fas fa-city"></i></button>
<button style="color:green" class="btn_nav_right"><i class="fas fa-tree"></i></button>
<button style="color:black" class="btn_nav_right"><i class="fas fa-landmark"></i></button>
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="addMarkerModal">
<button class="btn_nav_right" id="addspot">add to</button>
<select name="" id="">
<option value="">Europe</option>
<option value="">Germany</option>
</select>
</div>
<button class="btn_nav_right"class="showMyMarkers">show only my list </button>
<button class="btn_nav_right"class="createListModal">Create new </button>
</div>
</div>
</div>
</div>
</div>

#myModal {
position: relative;
}

#myModal2 {
position: relative;
}
.modal-dialog {
position: fixed;
width: 200px;
margin: 0;
padding: 10px;
}

.modal-dialog2 {
position: fixed;
width: 200px;
margin: 0;
padding: 10px;
}

.modal-dialog3 {
position: fixed;
width: 250px;
margin: 0;
padding: 10px;
}

$('.modal-dialog2').draggable({
handle: ".modal-content"
});
});

</script>

Vielen Dank für eure Hilfe

Sempervivum · 29. Januar 2022

Zitat

dass die Eigenschaft auf Buttons im Hintergrund verloren gegangen ist.

Wahrscheinlich meinst Du damit, dass die Buttons der Modale im Hintergrund nicht auf Klicks reagieren. Das habe ich auch fest gestellt und es liegt daran, dass das oberste div div.modal.fade, wenn auch unsichtbar, das gesamte Browserfenster ausfüllt und die Klicks auf die Buttons der anderen Modale abfängt.

sfthbara · 29. Januar 2022

Danke,

ja genau das habe ich gemeint. Wäre das nicht lösbar, indem man dem obersten div div modal.fade eine weitere Klasse zuweist, mit der man Länge und Breite definiert?

sfthbara · 29. Januar 2022

hmm, ich habe das mal ausprobiert. also quasi so:

.backmodal{
width: 300px;
height: 300px;
background-color: brown;
}

aber dann scheint er das Modal einfach unten dranzuhängen

Sempervivum · 29. Januar 2022

Wie ich schon schrieb, empfehle ich nicht, an dem Bootstrap-Modal herum zu schrauben sondern es selbst zu machen. Man findet leicht Scripts für das Dragging und ein Modal ist auch kein Hexenwerk. Z. B hier:

https://blog.pliszko.com/2021-…thout-external-libraries/

Das funktioniert auch für Touch-Geräte.

Das könnte dann so aussehen:

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Modal Draggable</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        .my-modal {
            display: inline-block;
            min-width: 50%;
            border: 2px solid lightgray;
            border-radius: 0.5rem;
            background-color: white;
        }
    </style>
</head>

<body>
    <!-- Modal 1 -->
    <div id="my-modal-1" class="my-modal">
        <header class="handle modal-header">
            <button class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="my-modal-title">Modal 1</h4>
        </header>
        <main class="modal-body">
            Modal Body
        </main>
        <footer class="modal-footer">
            <button class="btn btn-default close">Close</button>
        </footer>
    </div>
    <!-- Modal 2 -->
    <div id="my-modal-2" class="my-modal">
        <header class="handle modal-header">
            <button class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="my-modal-title">Modal 2</h4>
        </header>
        <main class="modal-body">
            Modal Body
        </main>
        <footer class="modal-footer">
            <button class="btn btn-default close">Close</button>
        </footer>
    </div>
    <script>
        function simpleDraggable(elementSelector, handleSelector) {
            const elements = document.querySelectorAll(elementSelector);
            if (elements.length === 0) {
                throw Error(`Elements matching selector ${elementSelector} not found`);
            }

            const getCursorPositionFromEvent = (e) => {
                if (e.touches && e.touches.length > 0) {
                    return {
                        x: e.touches[0].clientX,
                        y: e.touches[0].clientY,
                    };
                } else {
                    return {
                        x: e.clientX,
                        y: e.clientY,
                    };
                }
            };

            for (let element of elements) {
                let handle;
                if (handleSelector) {
                    handle = element.querySelector(handleSelector);
                }

                element.style.position = 'absolute';

                let cursorPositionX = 0;
                let cursorPositionY = 0;

                const start = (e) => {
                    e.preventDefault();

                    // get initial cursor position
                    const cursorPosition = getCursorPositionFromEvent(e);
                    cursorPositionX = cursorPosition.x;
                    cursorPositionY = cursorPosition.y;

                    document.addEventListener('mousemove', dragging);
                    document.addEventListener('touchmove', dragging);

                    document.addEventListener('mouseup', stop);
                    document.addEventListener('touchend', stop);
                    document.addEventListener('touchcancel', stop);
                };

                const dragging = (e) => {
                    e.preventDefault();

                    // get new cursor position
                    const cursorPosition = getCursorPositionFromEvent(e);

                    // calculate position change
                    const positionChangeX = cursorPositionX - cursorPosition.x;
                    const positionChangeY = cursorPositionY - cursorPosition.y;

                    // save new cursor position
                    cursorPositionX = cursorPosition.x;
                    cursorPositionY = cursorPosition.y;

                    // set the element's new position:
                    element.style.left = `${element.offsetLeft - positionChangeX}px`;
                    element.style.top = `${element.offsetTop - positionChangeY}px`;
                };

                const stop = () => {
                    document.removeEventListener('mousemove', dragging);
                    document.removeEventListener('touchmove', dragging);

                    document.removeEventListener('mouseup', stop);
                    document.removeEventListener('touchend', stop);
                    document.removeEventListener('touchcancel', stop);
                };

                if (handleSelector && handle) {
                    handle.addEventListener('mousedown', start);
                    handle.addEventListener('touchstart', start);
                } else {
                    element.addEventListener('mousedown', start);
                    element.addEventListener('touchstart', start);
                }
            }
        }

        simpleDraggable('.my-modal', '.handle');

        // Eventlistener für das Schließen der Modal registrieren:
        document.addEventListener('click', event => {
            const
                tgt = event.target,
                btn = tgt.closest('button.close'),
                parentModal = tgt.closest('div.my-modal');
            if (btn.matches('button.close') && parentModal) {
                parentModal.style.display = 'none';
            }
        });

        // das folgende nur damit die Modale nicht übereinander liegen:
        const
            boundingRect = document.querySelectorAll('.my-modal')[0]
                .getBoundingClientRect(),
            hModal = boundingRect.height;
        document.querySelectorAll('.my-modal')[1].style.top = hModal + 'px';
    </script>
</body>

</html>

Alles anzeigen

mehrere draggable Modale gleichzeitig

Jetzt mitmachen!

Teilen

Tags