用jquerymobile弹出窗口

时间:2012-07-11 08:18:12

标签: jquery-mobile popup

您好我想用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>

1 个答案:

答案 0 :(得分: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

                });
            });
        });