jquery-mobile - 使用 jquerymobile 弹出窗口

Question

您好，我想用 Jquerymobile 创建一个弹出窗口。在我的应用程序中，我有一个问题和三个答案选项。如果用户点击一个答案，那么它应该会出现一个弹出窗口：正确答案：这是正确的。对于错误的答案：这是错误的。3个答案选项，两个是错的，一个是对的。

有人可以帮我吗？

<fieldset data-role="controlgroup">
                <legend>
                    Question?
                </legend>
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1">Körpergewicht / (Körpergröße)2</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2">(Körpergewicht) / Körpergröße 2</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                <label for="radio-choice-3">Körpergewicht / (Alter)2</label>

            </fieldset>
        <a href="#" id="popupbut" data-role="button" data-theme="b">prüfen</a>

---

    <script type="text/javascript">

$(document).ready(function() {
    $(document).delegate('#popupbut', 'click', function() {
        alert($("input[name='radio-choice-1']:checked").val());
                    $('<div>').simpledialog2({
                        mode: 'blank',
                        headerText: 'Falsch',
                        headerClose: true,
                        blankContent : 

                            '<p><br /><br />This is wrong.</p>'
                    })

                });})

</script>

Answer 1

这应该可以解决您的问题。

  $(document).ready(function () {
            $(document).delegate('#popupbut', 'click', function () {
                var content = '';
                var headerText = '';
                if ($("input[name='radio-choice-1']:checked").val() == 'choice-1') {
                    content = '<p><br /><br />Right!.</p>'
                    headerText = 'Right';
                } else {
                    content = '<p><br /><br />Wrong!.</p>'
                    headerText = 'Wrong';
                }
                $('<div>').simpledialog2({
                    mode: 'blank',
                    headerText: headerText,
                    headerClose: true,
                    blankContent: content

                });
            });
        });