Ersetzen Popup-Text auf Taste je gedrückt

Hier Code ist, dass eine Schaltfläche erstellt, die ein Popup aufruft:Ersetzen Popup-Text auf Taste je gedrückt

<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="flow">popup button</a>

Dies ist der Code, der das Popup mit jQuery Mobile erstellt:

<div data-role="popup" id="positionWindow" class="ui-content popup" data-theme="b" data-overlay-theme="a"> 
     <a href="#" data-rel="back" data-role="button" data-theme="b" data-overlay-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
     <p> Replace the text here depending on which button is pressed </p> 
</div>

Wie Ich erstelle mehrere Schaltflächen, die alle denselben Code aufrufen, der zum Erstellen des Popups verwendet wurde, und ersetzen dann den Text innerhalb des Popup-Fensters, je nachdem, welche Taste gedrückt wurde.

Quelle

2017-12-15 user3334789

Also wie ist der Knopf erstellt? Nicht wirklich klar, was Sie fragen – charlietfl

Das Popup wird innerhalb dieser div erstellt. Es verwendet jQuery Mobile, um es zu erstellen. – user3334789

Aber Ihre Frage war über mehrere Schaltflächen mit demselben Code, um jede Schaltfläche zu erstellen. Verwirrend – charlietfl

Es scheint mir in Ordnung zu sein, nur ein Popup zu verwenden und den Inhalt dynamisch festzulegen. Anstatt die href in Markup verwenden, sollten Sie Ihr Pop-up aus dem Code öffnen:

$(document).on("vclick", "a[data-popup]", function(e) { 
 
    var cases = [ 
 
     "You pressed Button 1", 
 
     "You pressed Button 2" 
 
    ], 
 
    id = $(this).data("popup"); 
 
    $("#msg-block").text(cases[id - 1]); 
 
    $("#myPopup").popup("option", "transition", "flow").popup("open"); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page"> 
 
    <div data-role="header" data-position="fixed"> 
 
     <h2>Header</h2></div> 
 
    <div role="main" class="ui-content"> 
 
     <a class="ui-btn" data-popup="1" href="#">Popup Button 1</a> 
 
     <a class="ui-btn" data-popup="2" href="#">Popup Button 2</a> 
 
    </div> 
 

 
    <div data-role="popup" id="myPopup" class="ui-content popup" data-theme="b" data-overlay-theme="a"> 
 
     <a href="#" data-rel="back" data-role="button" data-theme="b" data-overlay-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
 
     <p id="msg-block"> Replace the text here depending on which button is pressed </p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Erläuterung: die Taste, um die Textnachricht zu binden, die ich in meinem Beispiel verwenden ein benutzerdefinierte data-attribute aber - Wenn Sie bevorzugen - Sie könnten nur die id der Tasten verwenden. Wie du willst.

Quelle

2017-12-15 18:09:21 deblocker

Danke! Das einzige Problem, das ich jetzt habe, ist, den Text innerhalb des Popups zu formatieren. Ich kann keine HTML-Textformatierung verwenden. – user3334789

Warum nicht? Anstelle von $ ("# msg-block"). Text (Fälle [id - 1]); 'benutze einfach' $ ("# msg-block"). Html (Fälle [id-1]); 'und put Ihr Markup innerhalb des Cases-Arrays, das war's! – deblocker

Super danke! – user3334789

Ersetzen Popup-Text auf Taste je gedrückt

Antwort

Verwandte Themen