-1

Ich möchte ein benutzerdefiniertes Alarm/Popup-Fenster entwerfen, um das gewünschte Aussehen und Gefühl zu geben. Ich habe versucht Dialogbeispiel von here. Nun möchte ich, dass, nachdem das benutzerdefinierte Popup angezeigt wird, meine JS-Engine nicht weiter fortfahren soll, bis ich eine Aktion für das Popup mache. Dies ist vergleichbar mit Popups, die mit JS erstellt wurden.Benutzerdefinierte Alarm/Popup-Fenster und halten JS-Engine

In meinem Beispiel wird alert('2') ausgeführt, sobald popup gerendert hat. Ich möchte, dass alert('2') nur ausgeführt werden soll, nachdem ich auf "Abbrechen" oder "Löschen" auf Popup geklickt habe und der JS-Code, der ihnen zugeordnet ist, ausgeführt wird.

Ich weiß, dies ist möglich, weil DHTMLX Framework es getan hat, bietet es benutzerdefinierte Popup und bis Sie etwas Aktion auf diesem Popup, nächste JS-Code wird nicht ausgeführt.

Unten ist das minimale reproduzierbare Beispiel.

<html> 
    <head> 
     <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' /> 

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

     <script> 
      function testPopup(){ 
       alert('1'); 
       $("#popupDialog").popup("open"); 
       alert('2'); 
      } 
     </script> 
    </head> 

    <body> 

     <input type="button" onclick="testPopup()" value="testPopup"/> 

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

    </body> 
</html>

Quelle

2016-05-05 pjj

Es ist nicht mit JavaScript möglich. – epascarello

Können Sie ein Problem mit Ihrem Problem lösen? Ich könnte eine Idee haben, zu helfen, danke. – Chris

Auch wann sollte der Alarm ('2') angerufen werden? Nachdem du etwas mit dem Pop-up gemacht hast? – Chris

Sie können das Popup-Widgets verwenden afterclose Ereignis den Code zu feuern, die nach dem Popup laufen soll, wird entlassen:

function testPopup(){ 
    alert('1'); 
    $("#popupDialog").popup("open").on("popupafterclose", function(event, ui) { 
    alert('2'); 
    }); 
}

DEMO

Quelle

2016-05-05 21:22:42 ezanker

Danke, nette Anregung, es ist sehr ähnlich wie Callback-Funktion, ich weiß darüber, aber ich kann das nicht aus vielen Gründen und am meisten, dass ich hv viele Programmierung getan, wo ich JS 'Build in' Alert 'und jetzt will ich um eine benutzerdefinierte Warnung zu zeigen, wenn ich hv, um Ihren Weg zu tun, dann hv ich eine Menge Code zu berühren .. Ich hv, einen Weg zu finden, wo ich nur "Alert" mit meinem Code ersetzen kann, um das benutzerdefinierte Popup anzuzeigen, und ich kann stellen Sie sicher, dass bis der Benutzer eine Aktion im Popup ausgeführt hat, nichts weiter ausgeführt wird. – pjj

@pjj: http://stackoverflow.com/questions/13635297/emulate-javascript-alert-blocking-nature – ezanker

können Sie vorschlagen, süß zu verwenden alarmieren die sind wirklich einfach zu bedienen und Art von fabelhaften im vorderen Ende machte einen Blick:

1) Laden Sie den süßen Alarm herunter und extrahieren Sie ihn.

2) Überprüfen Sie den Ordner dist und verschieben Sie die Datei .min.js und die CSS-Datei in Ihr Projekt. 3) nutzen sie in der Dokumentation als defineed here

4) Sie zum Beispiel wird es Art von

 <script> 
      $("#popupDialog").click(function(){ 
      swal("congrats your popup work fine "); 
      }) 
     </script>

hoffen, dass es ein wenig geholfen

NB: Vergessen Sie nicht, die CSS zu laden Datei zuerst und die JS-Datei

Quelle

2016-05-05 23:56:19 PacMan

Benutzerdefinierte Alarm/Popup-Fenster und halten JS-Engine

Antwort

DEMO

Verwandte Themen