Jquery-UI modales Formular zu schließen-Schaltfläche position anzeigen

Ich habe ein Anzeige-problem mit der schließen-Schaltfläche in der oberen rechten Ecke auf jquery ui modal form.
Ich hatte als Beispiel: http://jqueryui.com/dialog/#modal-form

Also machte ich: http://jsbin.com/atenac/3/edit

Wenn Sie klicken Sie auf neuen Benutzer Anlegen Sie sollten sehen, dass das schließen-Symbol wird nicht richtig angezeigt.

Getestet habe ich mit chrome(neueste Version) und IE9. Und es wird gezeigt, von der unteren rechten Ecke der eigentliche Behälter.

Gibt es ein problem mit den themes, oder bin ich etwas fehlt?
Wechseln Sie zu base cdn funktioniert es, aber mit anderen css funktioniert es nicht.

Code:

<head>
    <!-- base cdn: http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css-->
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

</head>
<body>
    <div id="dialog-form" title="Create new user">
        <p class="validateTips">
            All form fields are required.</p>
        <form>
        <fieldset>
            <label for="name">
                Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
            <label for="email">
                Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">
                Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        </form>
    </div>
    <button id="create-user">
        Create new user</button>
</body>
<script>
    $(function () {
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    allFields.removeClass("ui-state-error");
                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#create-user")
                  .button()
                  .click(function () {
                      $("#dialog-form").dialog("open");
                  });
    });
</script>
  • Sollten auch Sie einige Ihrer code und nicht nur links so, dass dieser post nützlich bleibt, wenn die links sterben.
  • Danke, ich habe auch den code jetzt
InformationsquelleAutor Petrutiu Mihai | 2013-01-29
  1. 8

    Du scheinst mit den falschen stylesheet (version 1.9.0). Verlinkung auf die version 1.10.0 der CSS scheint es behoben:
    http://jsbin.com/atenac/8/edit

    Den richtigen CSS-link ist:
    http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css

    InformationsquelleAutor masterteedy
Schreibe einen Kommentar