如何使用 else{} 函数弹出 jQuery UI 对话框？

Question

我正在使用 jQuery UI 对话框。此处的代码使对话框在单击 HTML 按钮时弹出。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>


</body>
</html>

这很好用，但我这里有一个 if else 函数：

  if(form.pswrd.value === "password")
  {
  window.open('page.html')/*opens the target page while Id & password matches*/
  }
  else
  {
//jQuery Dialog opens HERE
  }
  }

最下面的else函数就是我要触发的jQueryUI对话框。如何让 else 打开 jQuery 对话框？我已经尝试过将脚本的这一部分包含在我的 else 中，但无济于事：

$( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});
  } );

Answer 1

$( "#opener" ).on( "click", function() {
  if(form.pswrd.value === "password") {
      window.open('page.html'); /*opens the target page while Id & password matches*/
    } else {
      $( "#dialog" ).dialog( "open" );
    }
  }
});

Answer 2

您不需要点击侦听器手动打开它

就这样：

else { 
   $( "#dialog" ).dialog( "open" );
}

Answer 3

您的代码看起来不错，您只需要在 else 子句中触发打开的对话框：

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>

<script>
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("#opener").on("click", function() {
    if (form.pswrd.value === "password") {
      window.open("page.html");
    } else {
      $("#dialog").dialog("open");
    }
  });
});
</script>

如何使用 else{} 函数弹出 jQuery UI 对话框？

How to make jQuery UI Dialog pop up with an else{} function?

html

javascript

css

jquery

jquery-ui