Javascript：从按钮调用对话框答案

【问题标题】：Javascript: call dialog from buttonJavascript：从按钮调用对话框
【发布时间】：2015-06-18 20:38:03
【问题描述】：

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

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

在 stackoverflow 上我也看到了相关问题。但他们都无法回答我的问题：我做错了什么或者我应该怎么做才能让它发挥作用？

我的代码是：

    <!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>

【问题讨论】：

标签： javascript button dialog

【解决方案1】：

只需将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>

您必须对每个按钮/对话框组合执行相同操作。

见demo

【讨论】：

【解决方案2】：

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

主要问题是调用 btn1 点击函数

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

【讨论】：