팝업 내용이 다릅니다.

Question

예전의 온라인 퀴즈를 질문에 대답하는 동안 배울 수있는 대화식 대화식 화면으로 변경하고 있습니다. 나는 팝업을 만들 수 있고 팝업의 버튼을 클릭 할 때 다음 질문으로 간다. 하지만 난 당신을 감사합니다, 저를 도와주세요 (그들이 그것을잘못 대답하면 설명와 축하의 제대로 질문 대답 단어 및 팝업과 팝업)를 특정 콘텐츠를 표시하는 도움이 필요합니다.

<div data-role="main" class="ui-content"> 
      <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" 
       class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Continue</a> 


      <div data-role="popup" id="myPopupDialog"> 
       <div data-role="header"> 
        <h1>Header Text</h1> 
       </div> 

       <div id="divNextButton" class="ui-content"> 
        <h2>Content and explaination here</h2> 
        <button type="button" id="nexttab" class="btn btn-primary btn-lg"> 
         Next question <span class="fa fa-angle-double-right"></span> 
        </button> 


       </div> 
      </div> 
     </div> 








    $('#nexttab').on('click', function (e) { 
     e.preventDefault(); 
     setTimeout(function() { 

      var toggleTab = $('.nav-tabs li').filter('.active').next('li').find('a[data-toggle="tab"]'); 
      toggleTab.tab('show'); 
      $('#questionNo').html(toggleTab.data('qno')); 
      loadQuestion(toggleTab.data('qid'), toggleTab.data('jid')); 
     }, 200); 

    }); 

Answer 1

내 모든 프로젝트에서 재사용중인 팝업 기능을 참조하십시오. 나는 2 년 전에 그것을 썼다. 그리고 아직도 그것을 제외하고 직업을하고있다.

텍스트를 팝업 기능으로 전달하면됩니다.
도움이 필요하시면 알려주세요.

var popup = { 
 
    inputCallback: null, 
 
    isActive: false, 
 
    hide: function() { 
 
     $('.popup-container').animate({ "z-index": "-1", "opacity": "0" }, 200); 
 
     popup.isActive = false; 
 
     if (popup.inputCallback != null && popup.inputCallback != undefined) 
 
      popup.inputCallback.focus(); 
 
    }, 
 
    show: function (title, text) { 
 
     if (!popup.isActive) { 
 
      popup.isActive = true; 
 
      text = ((text != "") && (text != undefined)) ? text : ""; 
 
      $('.popup-description').html('<p>' + text + '</p>'); 
 
      title = title != "" && title != undefined ? title : ""; 
 
      $('.popup-title').html("<h1>" + title + "</h1>"); 
 
      $('.popup-container').css({ "z-index": "9999" }); 
 
      $('.popup-container').animate({ "opacity": "1" }, 1000); 
 

 
      setTimeout(function() { 
 
       $('.popup-wrapper').focus(); 
 
       $('.close-popup').focus(); 
 
      }); 
 
     } 
 
    } 
 
}; 
 

 
$(document).ready(function(){ 
 
    $('#popup').on('click', function(e){ 
 
     e.preventDefault(); 
 
     var title= $('#title').val(); 
 
     var content= $('#content').val(); 
 
     popup.show(title, content); 
 
     return false; 
 
    }); 
 
    
 
    $('.close-popup').on('click', popup.hide); 
 
});

.popup-container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0,0,0,.8); 
 
    z-index: -1; 
 
    opacity: 0; 
 
} 
 

 
.popup-description { 
 
    font-size: 17px; 
 
    text-align: left; 
 
    line-height: 1em; 
 
    padding: 15px; 
 
} 
 

 
.popup-wrapper { 
 
    position: relative; 
 
    text-align: center; 
 
    background-color: #ff0066; 
 
    color: #fff; 
 
    font-size: 1.7em; 
 
    width: 50%; 
 
    height: auto; 
 
    padding-bottom: 10px; 
 
    top: 25% !important; 
 
    margin: 0 auto; 
 
    border: 4px solid #fff; 
 
    box-sizing: content-box; 
 
} 
 

 
.popup-title { 
 
    width: 100%; 
 
    font-size: .9em; 
 
    padding: 5px 0px 0 10px; 
 
    line-height: 1em; 
 
    text-align: left; 
 
} 
 

 
.close-popup { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 25px; 
 
    color: #fff; 
 
    border-radius: 100%; 
 
    cursor: pointer; 
 
    background-color: #ff0066; 
 
} 
 

 
    .close-popup:after { 
 
     content: 'X'; 
 
     position: absolute; 
 
     vertical-align: middle; 
 
     top: 1px; 
 
     right: 0; 
 
     left: 0; 
 
     color: #fff; 
 
     font-size: 1em; 
 
     font-weight: bold; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="title" placeholder="Type text to show title" /> 
 
<input type="text" id="content" placeholder="Type text to show title" /> 
 
<input type="button" id="popup" value="open popup" /> 
 
<div class="popup-container"> 
 
    <div class="popup-wrapper"> 
 
     <div class="popup-title"></div> 
 
     <div class="popup-description"></div> 
 
     <div class="close-popup" tabindex="0" alt="Close popup" title="Close popup" aria-label="Close popup"></div> 
 
    </div> 
 
</div>

행운

, 이도.