Javascript: 从按钮调用对话框

Question

我希望你能帮助我，因为我是 javascript 的新人。我想通过单击按钮打开一个对话框。当它出现并单击 "OK" 时，应该会弹出第二个对话框。

http://forums.asp.net/t/1962249.aspx?Make+a+button+open+a+javascript+dialog

我也在 Whosebug 上看到了相关问题。但是 none 可以回答我的问题：我做错了什么或者我应该怎么做才能让它发挥作用？

我的密码是：

    <!doctype html>
     <html lang="en">
     <head>
     <meta charset="utf-8">
     <title>jQuery UI Dialog - Default functionality</title>
     <link rel="stylesheet"     href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
      $(function() {
       $( "#dialog" ).dialog(
       {
        autoOpen:false,
        maxHeight: 250,
        maxWidth: 600,
        buttons: [
        {
            text: "Ok",
            icons: { primary: "ui-icon-check"},
            click: function() 
            {
                $( this ).dialog( "close" );
                $("#dialog2").dialog("open");
            }
        },

        {
            text: "Cancel",
            icons: { primary: "ui-icon-close"},
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
    });
    $( "#dialog2" ).dialog(
    {   
        autoOpen: false,
        maxHeight: 400,
        maxWidth: 600,
        buttons: [
        {
            text: "Ok",
            icons: { primary: "ui-icon-check"},
            click: function() 
            {
                $( this ).dialog( "close" );
                $("#dialog3").dialog("open");
            }
        },

        {
            text: "Cancel",
            icons: { primary: "ui-icon-close"},
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
    });
    $( "#dialog3" ).dialog(
    {   
        autoOpen: false,
        maxHeight: 400,
        maxWidth: 600,
        buttons: [
        {
            text: "Ok",
            icons: { primary: "ui-icon-check"},
            click: function() 
            {
                $( this ).dialog( "close" );
                $("#dialog3").dialog("open");
            }
        },

        {
            text: "Cancel",
            icons: { primary: "ui-icon-close"},
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
    });
  });
  $function myFunction(){
    $( "#btn1" ).click(function() {
        $("#dialog").dialog("open");
    }
  }
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>Tekst</p>
</div>

 <div id="dialog2" title="Basic dialog">
    <p>Tekst</p>
</div>

 <div id="dialog3" title="Basic dialog">
  <p>Test.</p>
</div>

<button id="btn1" onclick="myFunction()" class="ui-state-default ui-corner-all">Click Here</button>

</body>
</html>

Answer 1

您的代码存在一些语法问题。完整修复在这里 http://plnkr.co/edit/?p=preview

主要问题是对 btn1 click 函数的调用

$("#btn1").click(function() {
    $("#dialog").dialog("open");
});

Answer 2

只需像这样注册 click 处理程序：

$( "#btn1" ).click(function() {
    $("#dialog").dialog("open");
});

在您已经创建对话框的 domReady 函数中。

并删除这部分：

$function myFunction(){
    $( "#btn1" ).click(function() {
        $("#dialog").dialog("open");
    }
}

并在 input 元素中删除 onclick 属性。

<button id="btn1" class="ui-state-default ui-corner-all">Click Here</button>

您必须对每个 button/dialog 组合执行相同的操作。

见demo

Javascript: 从按钮调用对话框

Javascript: call dialog from button

javascript

dialog

button