如何使用else {}函数弹出jQuery UI Dialog?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用else {}函数弹出jQuery UI Dialog?相关的知识,希望对你有一定的参考价值。

我正在使用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" );
});
  } );
答案

你的代码看起来很好,你只需要触发在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 { 
   $( "#dialog" ).dialog( "open" );
}
另一答案
$( "#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" );
    }
  }
});

以上是关于如何使用else {}函数弹出jQuery UI Dialog?的主要内容,如果未能解决你的问题,请参考以下文章

弹出窗口内的JQuery UI Datepicker

在 jquery 中发布数据时如何使用 jquery UI 使 post.php 弹出消息

Jquery UI 自动完成。如何使用 innerHTML 在 div 中写入结果?

不阻止 UI 的 jQuery 移动弹出窗口

jQuery UI - Datepicker - 隐藏年份

在同一个aspx页面中同时使用jqgrid和jquery-ui,ui的dialog弹窗一闪就关闭,如何让弹窗留住?