Bootstrap Modal i Draggable elements

Question

Siema, przychodze dziś do was z trzema pytaniami!

I. Czy moge zrobić jakoś że jak klikne w obręb poza wyświetlonym modalem

np to zaznaczone na czerwono:

to modal nie zniknie?

II: czy moge zrobić jakoś za pomocą JavaScript CSS i HTML (bez jQuery jQueryUI i jakiś reactów vue i innych tp.)

element który moge sobie przenosić na dowolne miejsce strony (draggable). np. na wix lub innych można tak przenosić jakieś divy buttony etc.

III: jak można zmienić zindex bootstrap modala

Prosze o pomoc

Answer 1

Ad.1 Trzeba by sprawdzić, na który event chowany jest modal przy kliknięciu poza jego obszar i ten event odpiąć lub podpiąć się wyżej i zatrzymać jego propagację.

Ad.2 Zapoznaj się z Drag & Drop API.

Comments

ad.1 znalazłęm w necie że można zrobić  data-backdrop="false"

:D

a ad.2 pobawie się :D

---

III: jak można zmienić zindex bootstrap modala

Hmm, po prostu zmienić z-index? Możliwe, ze nie obejdzie się bez użycia !important (jeśli sam Bootstrap tego używa).

---

w jakim divie .modal .modal-content czy jakim

---

Zależy od struktury tego modala. Nie pokazałeś kodu.

---

<div class="modal fade modal-app-xl" style="overflow: hidden;" id="appOpen'.$row["id"].'" tabindex="-1" role="dialog" aria-labelledby="appOpenText'.$row["id"].'" aria-hidden="true">
                                <div class="modal-dialog modal-xl rounded-0" role="document" style="transform: scale(1);" id="appTofunctions'.$row["id"].'">
                                    <div class="modal-content" class="appHandler" id="appopened__'.$row["id"].'">
                                        <div class="modal-header" id="appopened2__'.$row["id"].'" style="line-height: 93px;">
                                            <h2 class="modal-title" id="appOpenText'.$row["id"].'">'.$row["name"].'</h2>
                                            <button type="button" class="minApp12 ml-sm-auto" data-dismiss="modal">
                                                _
                                            </button>
                                            <button type="button" class="closeApp12" data-dismiss="modal" aria-label="Close" onclick="document.querySelector(`#appOpened'.$row["id"].'`).remove();">
                                                &times
                                            </button>
                                        </div>
                                        <div class="modal-body" >
                                            <iframe src="'.$row['linkto'].'" class="iframe-apps" style="height: 80vh; width: 100%; margin:0; border:0;"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>

 

---

Przydał by się cały kod do tego modala (razem z CSS i Bootstrapem), żeby można było sprawdzić jak to działa i wtedy szukać rozwiązania problemu z z-index.

I co konkretnie chcesz zmienić przez z-index? Modal zazwyczaj pokazuje się nad treścią na stronie. Czy chcesz przeplatać to z jakimś innym popupem?

---

wszystko all strona?

---

Może być i cała - wtedy najlepiej jak podasz jej adres (jeśli jest gdzieś wystawiona na świat). Ogólnie chodziło mi o pokazanie kodu, który pozwoli przetestować ten modal i sprawdzić, w czym jest problem z z-index.

---

Jest na localhoscie i ma z 1.5k linijek

---

ale postaram się