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

【问题标题】：How to make jQuery UI Dialog pop up with an else{} function?如何使用 else{} 函数弹出 jQuery UI 对话框？
【发布时间】：2019-02-10 18:58:16
【问题描述】：

我正在使用 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 函数是我想要触发jQuery UI 对话框的地方。如何让else 打开 jQuery 对话框？我已经尝试过将这部分脚本包含在我的else 中，但无济于事：

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

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

您的代码看起来不错，您只需要在 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>

【讨论】：

【解决方案2】：

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

只要做：

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

【讨论】：

【解决方案3】：

$( "#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" );
    }
  }
});

【讨论】：