Question

我希望你能帮助我，因为我是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>

Answer 1

只需注册" or '处理程序：

click

在您已经创建对话框的$( "#btn1" ).click(function() { $("#dialog").dialog("open"); });函数内。

删除此部分：

domReady

在$function myFunction(){ $( "#btn1" ).click(function() { $("#dialog").dialog("open"); } }元素中删除input属性。

onclick

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

请参阅demo

Answer 2

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

主要问题是调用btn1点击功能

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

Javascript：从按钮

2 个答案: