Question

按下链接时没有启动对话窗口，你能看到我的JS / HTML代码有什么问题吗？

感谢。

Answer 1

我稍稍调整了你的代码，所以它现在有效：

<强> JavaScript的：

$('#forgot').click(function() {
        $( "#forgot-dialog" ).dialog( "open" );
});

$(document).ready(function() {
    $( "#forgot-dialog" ).dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
    });
});

<强> HTML：

<a href="#" id="forgot">Forgot?</a>

<div id="forgot-dialog" style="display:none;" title="Reset your password">
<form id="forgotform" action="/forgotPassword.php" method="post">
<label for="forgot_email">Email</label>
<input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" />
</form>
</div>

这是一个有效的演示：http://jsfiddle.net/HxbTY/。

你没有包含jQuery UI，因为dialog()是jQuery UI的一部分，而不是jQuery。

我不确定为什么该函数没有触发（可能是jsFiddle.net错误），但我在链接中添加了click()处理程序以使其正常工作。

Answer 2

您在<a href="javascript:forgotPassword();">内定义了forgotPassword和$(document).ready功能。要使其有效，您需要将forgotPassword的定义移到ready之外或执行类似

的操作

<a id='my_link' href='javascript:void(0)'>Forgot</a>
$(document).ready(function() {
 .... 
  $("#my_link").click(function(e){ 
$("#forgot-dialog").dialog("open");
});

Answer 3

你的小提琴有一些问题。

首先，您没有将jquery UI包含为库，因此显然您的代码将失败。您还需要包含CSS。还有一些范围问题，我已经修复了这些并发布了解决方案

http://jsfiddle.net/jomanlk/LtQnT/11/

$(document).ready(function() {
    $('#theLink').click(function(){
                $( "#forgot-dialog" ).dialog( "open" );    
    });

    $( "#forgot-dialog" ).dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
    });
});

Answer 4

修正：http://jsfiddle.net/LtQnT/9/

Answer 5

您正在匿名范围中定义forgotPassword()函数，这是一件好事。但是，内联Javascript - 无论如何都是一件坏事 - 无法再访问它了。

请改用此代码：<a href="#" id="forgotPasswordLink">Forgot?</a>

在您准备好的代码中：$('#forgotPasswordLink').click(forgotPassword); - 将这两个单独的$(document).ready()函数合并为一个：http://jsfiddle.net/ThiefMaster/LtQnT/13/

Answer 6

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
   $('#theLink').click(function(){
                   $( "#dialog" ).dialog();    
    });

  } );
  </script>
  
 <a id='theLink' href="#">Forgot?</a> 
  
  <div id="dialog" title="Forgot Password" style="display:none;">
  <div id="forgot-dialog"  title="Reset your password">
<form id="forgotform" action="/forgotPassword.php" method="post">
<label for="forgot_email">Email</label>
<input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" />
</form>
</div>
</div>

为什么这个jQuery对话框不起作用？

6 个答案: