标签: jquery-dialog

我有以下ASP.NET标记:

<div id="myForm" title="My Form" style="display: none">
    <span>You can see me!</span>
    <div style="display: none">
        <asp:Button ID="btnSave" runat="server" Text="Button"
            OnClick="btnSave_Click" />
    </div>
</div>

<!-- called by an element click event elsewhere -->
<script type="text/javascript" language="javascript">
    $("#myForm").dialog({
        modal: true,
        width: 500,
        height: 200,
        resizable: false,
        buttons: {
            "Cancel": function () {
                $(this).dialog("close");
            },
            "Save": function () {
                $(this).dialog("close");
                // I want to call btnSave_Click (by DOM-clicking the button?)
            }
        }
    });
    $("#myForm").parent().appendTo("form:first");
</script>

我正在尝试使用jQuery.dialog生成的按钮来执行回发来代替ASP.NET按钮.我该怎么做才能使按钮提交并调用btnSave_Click方法？

编辑

"Save": function () {
    $(this).dialog("close"); …

我正在使用textarea的对话框.单击ok按钮后,textarea的值将通过ajax发送到服务器.
用户第一次写入textarea时,值被正确读取,但在所有后续操作中,发送的值与第一次相同,就像用户一遍又一遍地输入相同的字符串一样.

function message(url) { 
  var mydiv; 
  mydiv = $(document.createElement('div')); 
  mydiv.html("enter message: <textarea name='message' id='message'/>"); 
  mydiv.dialog(setProps(url));
  mydiv.dialog('open');
}

function setProps(url) {
  return {
    buttons: {
      "ok": function() {
        $.get('/act?url=' + url + '&message=' + $("#message").val().trim(),
          function(data) { 
            $("#content").load('/react?url=' + url); 
          }
        ); 
        $(this).dialog("close"); 
        $(this).dialog("destroy"); 
        // If I use the following all subseq. actions are empty:
        // $("#message").val(''); 
      }
    } 
  } 
} 

有没有办法在javascript中定义模态内容,而不是总是必须在页面上有一个元素并从中创建对话框？

它有标题选项,所以我可以"动态"创建模态标题,但实际内容呢？就像说我需要它说,"你要删除图像#539".而不是为每个可能的图像创建一个模态 - 甚至从创建元素然后从中创建对话框.

必须有一个更好的方法.

我在jquery中有一个确认对话框弹出并显示一些确认细节.我想要做的是,如果用户单击是,我想使用相同的确认对话框,但使用较小的文本,如"请稍候..."等.为此,我希望相应地调整我的对话框尺寸(意思是,在用户单击"是"之后,我希望我的对话框变小,因为其中只有一个小文本).我如何实现这样的目标？用户单击"是"后如何更改对话框的大小？

另外,我知道在javascript确认框中,如果用户单击OK,则返回TRUE,否则返回false.jquery模态确认boxex是否相同？如何知道用户是YES还是CANCEL？

谢谢

按转义键时如何销毁jquery对话框？

有没有办法添加这样的代码： $.dialog('destroy');

在关闭事件中？这是 close 事件：它看到最后一个 'else' 有一个 hide 方法，这就是那个家伙。但不能破坏那里的任何东西：

close: function( event ) {
    var that = this,
        maxZ, thisZ;

    if ( !this._isOpen ) {
        return;
    }

    if ( false === this._trigger( "beforeClose", event ) ) {
        return;
    }

    this._isOpen = false;

    if ( this.overlay ) {
        this.overlay.destroy();
    }

    if ( this.options.hide ) {
        this._hide( this.uiDialog, this.options.hide, function() {
            that._trigger( "close", event );                
        });
    } else {
        this.uiDialog.hide();
        this._trigger( "close", event );
    }

我有隐藏标题栏的 jQuery Dialog下面

$(".ui-dialog-titlebar").hide();

这也隐藏了关闭按钮Dialog.但我需要显示关闭按钮Dialog.

我怎样才能做到这一点 ？

我的对话框用户界面有一个小问题。我将 zIndex 值标记为高数字，但它似乎忽略了它。

以下是我的代码

        $( "#number-add" ).dialog({
            resizable: false,
            width: 500,
            modal: false,
            autoOpen: false,
            stack: false,
            zIndex: 9999,
            buttons: {
            "Add Contact": function(e) {

            var formData = $('#number-add-form').serialize();

            //submit record
            $.ajax({    
                type: 'POST',
                url: 'ajax/handler-add-new-account-number.php',     
                data: formData,
                dataType: 'json',
                cache: false,
                timeout: 7000,
                success: function(data) {           

                    $('#responceAddNumber').removeClass().addClass((data.error === true) ? 'errorBox' : 'passBox').html(data.msg).fadeIn('fast');   

                    if ($('#responceAddNumber').hasClass('passBox')) {
                        $('#responceAddNumber').fadeIn('fast');
                        $('#add-form').hide();              

                        window.location.reload();
                        setTimeout(function() {

                            $(this).dialog( "close" );                          
                        }, 1000);


                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {

                    $('#response-add').removeClass().addClass('errorBox')
                                .html('<p>There was an<strong> ' + …

我正在使用JQuery Dialog Box.

我在下面的代码中打开了对话框.

  $('#MyLogin').dialog({
                autoOpen: true,
                width: 450,
                modal: true,
                draggable: false,
                title: $('.LoginpopupHeaderText').text(),
                close: function(event, ui) {showSelect();}
            });

当对话框打开时,其中有登录按钮,使用click事件验证其中的用户名和密码字段.请参阅下面的代码示例.

    //Login Button Clicked
    $('#loginButton').click(function()
    {   
            //Code goes here
        });

我的登录按钮是图像而不是按钮.

现在我只想在我的登录对话框打开时按下" Enter "按钮,按下"Enter"按钮后它应该调用我的" loginButton "点击事件,这样它就像我们在打开时点击了loginbutton一样对话框.

请指教!

谢谢.

最好的祝福,

我有一个带有默认提交按钮的html表单.提交表单后,运行一个php文件(使用action = homelocation).我决定使用JQuery UI对话框来显示表单.我有2个默认按钮 - 一个用于保存,一个用于关闭对话框.任何人都可以告诉我如何将表单提交按钮操作分配给JQuery对话框按钮(即用对话框中的那个替换表单中的提交按钮)？这是我的代码:

 <div id="userdialog" title="Add">
 <form id="add" action="engine.php" method="POST">
 <input type="hidden" name="action" value="homelocation" id="action">
     <button type="submit">Save this location</button>
    </form></div>

对话:

 $('#userdialog').dialog({

    width: 260,
            position: [250,100],
            buttons: {
                       "Save": function() {
                          HERE GOES THE REQUIRED FUNCTION
                            $(this).dialog('close'); },

                                     "Don't Save": function() {
                        $(this).dialog("close");
                    }
                }

            });

我有一个jquery对话框如下 -

<div data-role="dialog" id="msg-popup">
  <div data-role="header">
      <h1>Notification</h1>
  </div>

  <div data-role="content" id> 
    <b id="notif-subject"></b>
    <p id="notif-popup-content">Test</p>
    <a href="#notif-details1" id="show-notif" data-role="button">abc</a>
    <a href="#" data-rel="back" data-role="button">Cancel</a>
  </div> 
</div>

我想动态地将"abc"改为"pqr".我该怎么办？我试过 -

$("#show-notif").text = "pqr";

但它不起作用.我能做错什么？

我希望能够在运行时更改模态和按钮的标题.目前我有这个我有批准或拒绝的行动

var recButton = actions =='approval' ? 'Approve' : 'Deny';

$("#dialog").dialog(
    {
        modal : true,
        buttons : {
            'update all' : function() {
                // window.location.reload();
                // $( this ).dialog( "close" );
                //do something here
            },
            Cancel : function() {
                $(this).dialog("close");
            }
        }
    }); //dialog
});

我也尝试过这个按钮

$("#dialog").dialog(
    {
        modal : true,
        buttons : {
            recButton : function() { ...

但在模态中它没有很好地转换,只是说recButton而不是变量值.我也需要更改标题.

更新:通过简单标题获得标题:

我编写了以下代码,创建了一个带有动态添加内容的弹出窗口.现在我想删除这些添加的项目或编辑它们,但它似乎没有点击其中一个按钮的事件(btnLSM_Remove + btnLSM_Edit).任何线索为什么会这样？btnLSM_Add并btnLSM_Okay以同样的方式工作,他们工作......

function ListManagementDialog(obj, dialogTitle, dialogText, listDelimiter, btnNames) {
    if (!$.isArray(btnNames)) {        
        return false;
    }

     if (dialogConfirmed) {
        return false;
    }

    btns[btnNames[0]] = function () {
        $(this).dialog('close');
        dialogConfirmed = true;
        if (obj) {
            obj.click();
        }
    };

    btns[btnNames[1]] = function () {
        $(this).dialog('close');
    };



    $('body').append(String.Format('<div id="divLSM_Dialog" title="{0}"><p>{1}</p>' +
        '<button id="btnLSM_Add" class="btnAdd" type="button" role="button" aria-disabled="false" title="Hinzuf&#252;gen" />' +               
        '<input id="txbLSM_Emailadresse" class="text ui-widget-content ui-corner-all" type="text" name="txbLSM_Emailadresse" style="display:none;">' +
        '<button id="btnLSM_Okay" class="btnOkay" type="button" role="button" aria-disabled="false" title="&#220;bernehmen" style="display:none;" …