Question

我一直在阅读一些帖子和Jquery UI文档，以便在点击按钮后使用Jquery UI创建一个对话框窗口，但到目前为止我还不清楚它是如何工作的，因为我在我的案例中尝试了一切并没有运行。这就是我所拥有的，可以是一个如此善良的人，并向我解释我做错了什么？

<button type='button' id='btn_reset'style='display:block;'>Reset</button>

<div id="warnungdialog" title="Warnung" style="display:none;">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
        </span>Was wird passiert?</p>
</div>

这就是我在Jquery方面所拥有的

$(btn_reset).on('click', function() {

    $("#warnungdialog").dialog({
        autoOpen: false,
        modal: true,
        width: 350,
        height: 'auto',
        buttons: {
            Weiter: function() {
                $(this).dialog("close");
            },
            Abbrechen: function() {
                $(this).dialog("close");
            }
        }
    });

    $(btn_reset).button();
    $(btn_reset).click(function() {
        $('#warnungdialog').dialog('open');
    });

});

Answer 1

我认为您的代码不起作用，因为只有当您单击按钮时才会执行对话框声明。必须在单击事件之前完成对话框声明。像这样

$(document).ready(function(){
// here dialog declaration
$("#warnungdialog").dialog({
    autoOpen: false,
    modal: true,
    width: 350,
    height: 'auto',
    buttons: {
        Weiter: function() {
            $(this).dialog("close");
        },
        Abbrechen: function() {
            $(this).dialog("close");
        }
    }
 });

 //here click event on button
    $("#btn_reset").bind("click",function(){
    $('#warnungdialog').dialog('open');
 });
 });

Answer 2

试试这个：

$(function() {
      $("#warnungdialog").dialog({
            autoOpen: false,
            modal: true,
            width: 350,
            height: 'auto',
            buttons: {
                Weiter: function() {
                    $(this).dialog("close");
                },
                Abbrechen: function() {
                    $(this).dialog("close");
                }
            }
        });
      $('#btn_reset').button();
      $('#btn_reset').click(function() {
         $('#warnungdialog').dialog('open');
      }); 
 });

这是一个有效的fiddle。

Answer 3

尝试：

$(btn_reset).button();
$(btn_reset).on('click', function() {

    $("#warnungdialog").dialog({
        autoOpen: false,
        modal: true,
        width: 350,
        height: 'auto',
        buttons: {
            Weiter: function() {
                $(this).dialog("close");
            },
            Abbrechen: function() {
                $(this).dialog("close");
            }
        }
    });

        $('#warnungdialog').dialog('open');

});

的jsfiddle：http://jsfiddle.net/qj6h7w2L/

如何通过点击按钮

3 个答案: