jquery mobile popup verzögert ausführen

[BodyLAB]

Hallo zusammen,

habe derzeit ein Problem was ich einfach nicht gelöst bekomme.
Was ich versuche ist ein PopUp was durch jquery Mobile konstruiert wird verzögert auszuführen.

Hier der Code des PopUps:

            <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false"
                style="max-width:400px;">
                <div data-role="header" data-theme="a">
                    <h1>Delete Page?</h1>
                </div>
                <div role="main" class="ui-content">
                    <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                    <p>This action cannot be undone.</p>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back"
                        data-transition="flow">Delete</a>
                </div>
            </div>

Ausführen tue ich das ganze über ein Link in diesem ein Bild ist:

<a href="#popupDialog" data-rel="popup" data-position-to="window"
                                            data-transition="pop" class="sleep">
                                            <img src="./img/karte1.png" alt="karte1" class="images" /></a>

Nun dachte ich an die Funktion setTimeout() doch diese setzt ja nur den weiteren auszuführenden JavaScript code aus. Ich möchte aber, wenn man auf das Bild Klickt das nach einer Prüfung ob es das richtige Bild ist, ein PopUp auf geht. Dazu müsste das A Element warten mit der Referenz zu id="popupDialog". Funktioniert so etwas oder habe ich einen Fehler in meiner Implementierung? Mit JavaScript beschäftige ich mich noch nicht lange.

Vielleicht ist hier ja jemand der wie es klappt 🙂

Freue mich von euch zu hören

 

[BodyLAB]

Also versucht habe ich das ganze auch so:

var elements = document.getElementsByClassName("verzoegert");
for (var i = 0; i < elements.length; i++) {
  let e = elements[i];
  e.addEventListener("click", function (evt) {
    evt.preventDefault();
    setTimeout(function () {
      document.location.href = e.getAttribute("href");
    }, 1)
  });
};

Ich hab mehrere Bilder in meiner Seite und möchte Prüfen ob eines der Bild mit dem "HauptBild" überein stimmt. Wenn das der Fall ist, soll ein PopUp auf gehen. Doch so wie oben geschrieben geht es nicht. Er referenziert zwar korrekt: localhost/index.html#popupDialog doch es sollte dort folgendes stehen: localhost/index.html&ui-state=dialog. Denke das liegt an jquery Mobile 😀

 

[BodyLAB]

Hab es gelöst.
Das ganze geht wiefolgt:

Das PopUp DIV muss so geändert werden:

 <div data-role="popup" id="popupDialog" data-rel="popup" data-position-to="window" data-transition="pop"
                data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
                <div data-role="header" data-theme="a">
                    <h1>Delete Page?</h1>
                </div>
                <div role="main" class="ui-content">
                    <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                    <p>This action cannot be undone.</p>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back"
                        data-transition="flow">Delete</a>
                </div>
            </div>

Dann kann man mit jquery es z. B. so machen:

 $("#btnpopup").on("click", function(){
    setTimeout(function(){  $("#popupDialog").popup("open");  }, 1000);
  });