ポップアップの内容が異なります

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>

幸運、 イド。