mehrere draggable Modale gleichzeitig

  • 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

  • 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.

  • 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">&times;</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;
    }


    <script>
    $('#filter').click(function() {
    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
    top: 0,
    left: 0
    });
    }
    $('#myModal').modal({
    backdrop: false,
    show: true
    });
    $('.modal-dialog').draggable({
    handle: ".modal-content"
    });
    });
    </script>

    <script>
    $('#routes').click(function() {
    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
    $('.modal-dialog2').css({
    top: 0,
    left: 0
    });
    }
    $('#myModal2').modal({
    backdrop: false,
    show: true
    });

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

    </script>



    Vielen Dank für eure Hilfe

  • 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.

  • 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?

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

    <div class="modal fade backmodal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">


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

    aber dann scheint er das Modal einfach unten dranzuhängen

  • 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:

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Sempervivum ()