弹出窗口中的不同内容

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>

祝你好运， 伊多。