Jquery Modal /對話窗體不工作

嗨，我是新編碼&試圖使用Jquery庫對話框/模態窗體。我有我的所有CSS，JS和HTML，但是當我點擊「創建新用戶」時，對話框/模式不會出現（按鈕後面的功能不起作用）。我得到下面的錯誤控制檯 - 任何幫助將非常感激：Jquery Modal /對話窗體不工作

錯誤消息在控制檯：

Uncaught TypeError: undefined is not a function main.js 
and it points to this ---> dialog = $("#dialog-form").dialog({

main.js文件

$(function() { 
    var dialog, form, 

    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29 
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, 
    name = $("#name"), 
    email = $("#email"), 
    password = $("#password"), 
    allFields = $([]).add(name).add(email).add(password), 
    tips = $(".validateTips"); 

    function updateTips(t) { 
    tips 
     .text(t) 
     .addClass("ui-state-highlight"); 
    setTimeout(function() { 
     tips.removeClass("ui-state-highlight", 1500); 
    }, 500); 
    } 

    function checkLength(o, n, min, max) { 
    if (o.val().length > max || o.val().length < min) { 
     o.addClass("ui-state-error"); 
     updateTips("Length of " + n + " must be between " + 
     min + " and " + max + "."); 
     return false; 
    } else { 
     return true; 
    } 
    } 

    function checkRegexp(o, regexp, n) { 
    if (!(regexp.test(o.val()))) { 
     o.addClass("ui-state-error"); 
     updateTips(n); 
     return false; 
    } else { 
     return true; 
    } 
    } 

    function addUser() { 
    var valid = true; 
    allFields.removeClass("ui-state-error"); 

    valid = valid && checkLength(name, "username", 3, 16); 
    valid = valid && checkLength(email, "email", 6, 80); 
    valid = valid && checkLength(password, "password", 5, 16); 

    valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter."); 
    valid = valid && checkRegexp(email, emailRegex, "eg. [email protected]"); 
    valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 

    if (valid) { 
     $("#users tbody").append("<tr>" + 
     "<td>" + name.val() + "</td>" + 
     "<td>" + email.val() + "</td>" + 
     "<td>" + password.val() + "</td>" + 
     "</tr>"); 
     dialog.dialog("close"); 
    } 
    return valid; 
    } 

    dialog = $("#dialog-form").dialog({ 
    autoOpen: false, 
    height: 300, 
    width: 350, 
    modal: true, 
    buttons: { 
     "Create an account": addUser, 
     Cancel: function() { 
     dialog.dialog("close"); 
     } 
    }, 
    close: function() { 
     form[ 0 ].reset(); 
     allFields.removeClass("ui-state-error"); 
    } 
    }); 

    form = dialog.find("form").on("submit", function(event) { 
    event.preventDefault(); 
    addUser(); 
    }); 

    $("#create-user").button().on("click", function() { 
    dialog.dialog("open"); 
    }); 
});

index.html文件

<html> 
<head> 
    <title>Modal form</title> 
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="css/grid.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css" /> 
    <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'> 
    <script src="js/jquery-1.11.2.js"></script> 
    <script src="js/main.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" value="Jane Smith" class="text ui-widget-content ui-corner-all"> 
     <label for="email">Email</label> 
     <input type="text" name="email" id="email" value="[email protected]" class="text ui-widget-content ui-corner-all"> 
     <label for="password">Password</label> 
     <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all"> 
     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
     </fieldset> 
    </form> 
    </div> 

    <div id="users-contain" class="ui-widget"> 
    <h1>Existing Users:</h1> 
    <table id="users" class="ui-widget ui-widget-content"> 
     <thead> 
     <tr class="ui-widget-header "> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Password</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>John Doe</td> 
      <td>[email protected]</td> 
      <td>johndoe1</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
    <button id="create-user">Create new user</button> 

</body> 
</html>

來源

2015-02-10 ARTLoe

我改變了你提到的廣告，但我仍然得到錯誤：「和它指向這個--->對話框= $（「＃dialog-form」）.dialog（{' – ARTLoe 2015-02-10 20:57:44

我進入jsfiddle並輸入你的代碼，它的工作，所以我回去並注意到你沒有導入jquery-ui。是特定於jquery-ui，所以你需要它的css和它的js。 – deweyredman 2015-02-10 21:00:57

看起來你已經導入jquery而不是jquery-ui。嘗試導入jquery-ui以及你應該沒問題。

此行添加到你的頭：

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

添加此CSS以及：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

來源

2015-02-10 20:54:31 deweyredman

謝謝soo much @deweyredman – ARTLoe 2015-02-10 21:05:59

沒問題，下面的用戶也注意到了它，大概一分鐘後，當我回答的時候，它就會出現。 – deweyredman 2015-02-10 21:08:26

請確保您有jQuery UI的，並且與UI而來的CSS。你的代碼是好的，只需添加這在<head>：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

看到工作演示：http://jsfiddle.net/swm53ran/221/

來源

2015-02-10 20:58:35 indubitablee

Jquery Modal /對話窗體不工作

回答

相關問題