Question

当我单击JQuery对话框的“确定”按钮时，我正在尝试重定向到另一个页面。似乎JQuery函数无法访问JavaScript函数定义的对话框。任何帮助，将不胜感激！这是我的代码：

$('#submitRegistration').bind('click', function() {
  $.post('verification/register.php', $('#register').serializeArray(), function(data){
      switch (data) {
          case "errMod":
              showDlg("Your attempt has been recorded. Expect the po-po any day now!");
              break;
          case "err1":
              showDlg("Username Incorrect", "The username must be at least 6 characters long");
              break;
          case "err2":
              showDlg("Password Incorrect", "Password must be at least 8 characters long");
              break;
          case "err3":
              showDlg("Database Offline", "The database is offline. Please try again later.");
              break;
          case "err4":
              showDlg("Not Unique Username", "Username has already been taken. Please choose another one");
              break;
          case "noerr":
              showDlg("Success!", "You have been registered! Click OK to continue");

                  while($('#message').dialog('isOpen')) {
                      continue;
                  }   
                          window.location = 'none.php';
                          break;
              default:                      
          }

      });



});

function showDlg(head, contents) {
      $('#message').html(contents);
      $('#message').dialog({                            
          title: head,
          modal: true,
          dragable: false,
          //resizable: false,
          show: 'slide',
          hide: 'slide',
          buttons: {
              'OK': function() { $('#message').dialog('close'); }   
          }
      });   
  }

Answer 1

您可以尝试使用jquery-ui

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal message</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#dialog-message" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    </script>
</head>
<body>

    <div id="dialog-message" title="Download complete">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>

操纵在其他功能中打开的JQuery Dialog

1 个答案: