교체 팝업 텍스트는 여기에 팝업을 호출하는 버튼을 생성하는 코드입니다

을 누르면 팝업을 만들 때 사용한 코드와 동일한 코드를 호출하는 여러 개의 버튼을 만든 다음 버튼을 누른 상태에 따라 팝업 내부의 텍스트를 바꿉니 까?교체 팝업 텍스트는 여기에 팝업을 호출하는 버튼을 생성하는 코드입니다

출처

2017-12-15 user3334789

그러면 버튼이 어떻게 생성됩니까? 당신이 무엇을 요구하는지 명확하게 알지 못합니다. – charlietfl

팝업은 그 div 안에 생성됩니다. 그것을 만들기 위해 jQuery Mobile을 사용하고 있습니다. – user3334789

하지만 귀하의 질문에 대한 여러 버튼에 대해 동일한 코드를 사용하여 각 버튼을 만들었습니다. 혼동 – charlietfl

하나의 팝업 만 사용하고 동적으로 콘텐츠를 설정하는 것이 좋습니다. 마크 업에서 href를 사용하는 대신에, 당신은 코드에서 팝업을 열어야합니다 :

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

설명 : 난 내 예제에서 사용하고있는 문자 메시지에있는 버튼을 바인딩 사용자 정의 data-attribute하지만, - 원하는 경우 버튼 중 id 만 사용할 수 있습니다. 너까지.

출처

2017-12-15 18:09:21 deblocker

감사! 내가 지금 가지고있는 유일한 문제는 팝업 내부의 텍스트를 포맷 할 수 있다는 것입니다. html 텍스트 서식을 사용할 수 없습니다. – user3334789

왜 안 되니? '$ ("msg-block") .html (cases [id - 1]);'을 사용하고'$ ("msg-block" 사례 배열 내부의 마크 업, 그게 전부입니다! – deblocker

감사합니다. – user3334789

교체 팝업 텍스트는 여기에 팝업을 호출하는 버튼을 생성하는 코드입니다

답변

관련 문제