Popup with jquerymobile

Question

Hello i want to create a popup with Jquerymobile. in my application i have one question and three answer options. If the user click on one answer then it should appear a popup: for the right answer : This is right. And for the wrong answers: This is wrong. 3 answer option, two are wrong and one is right.

Could somebody help me?

<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

This should resolve your problem.

  $(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

                });
            });
        });