标签: jquery-dialog

我在此UI对话框中提交表单后,我想从UI对话框中更改标题.所以在load我应该建议之后的回调函数中,但我已经尝试过google而没有结果.

有人有想法吗？

我尝试过跟随代码,但它只将对话框的左上角位置放在中心位置,这样就可以将元素对齐到右边.如何将对话框置于计算元素宽度的实际中心,以便中心线将对话框切换到50%50%的半边？

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

我在对话框中遇到了一个有趣的jQueryUI自动完成问题.

我的对话框HTML如下所示:

<div id="copy_dialog">
    <table>
        <tbody>
            <tr>
                <th>Title:</th>
                <td><input type="text" class="title" name="title"></td>
            </tr>
            <tr>
                <th>Number:</th>
                <td><input type="text" name="number"></td>
            </tr>
        </tbody>
    </table>
</div>

当我在上面的HTML上运行jQueryUI自动完成时,它完美无缺.

当我用对话框打开它时

$('#copy').click(function()
{
    $('#copy_dialog').dialog({
        autoOpen: true,
        width: 500,
        modal: false,
        zIndex: 10000000,
        title: 'Duplicate',
        buttons: {
            'Cancel': function()
            {
                $(this).dialog('close');
            },
            'Save': function()
            {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

然后在FireBug中,我可以看到自动完成仍然有效.它正在请求和接收结果,但我不再在输入字段下方看到选项列表.

我的想法是,这与对话框上的zIndex有关,远远大于自动完成菜单提供的内容,但我不确定.我还在研究正在发生的事情的确切细节,但我希望有人能在这里找到我的想法.

编辑 我尝试从对话框中删除zIndex,我的自动完成开始显示.不幸的是,我需要zIndex值来克服菜单栏的可怕高zIndex,我无法改变(无法访问代码的那个区域).因此,如果有一种方法可以将zIndex添加到自动完成中,那就太棒了; 在那之前,我可能只是从对话框中删除zIndex,并确保它不会出现在菜单栏区域周围.

由于许多网站都在利用jQuery UI,因此有一些主要的缺点需要克服,因为jQuery UI不支持响应式设计,并且maxWidth在与之结合使用时存在长期存在的错误width:'auto'.

所以问题仍然存在,如何使jQuery UI Dialog响应？

我有一个带有叠加声的对话框,如下所示:

     .ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      }

我的页面将有两个不同的页面高度.为了解决这个问题,我在我的JS文件中完成了这个:

如果小的可见:

$('.ui-widget-overlay').css("height", "985px !important");

其他

$('.ui-widget-overlay').css("height", "1167px !important");

显然这不起作用.还有另一种方法可以过度骑行!important吗？

页面可以来回切换,所以我需要总是有一个或另一个.此外,如果我不添加!important到CSS,那么叠加将无限扩展(在Facebook中,所以我假设那里有一个问题)

有什么建议？

我希望能够创建模态对话框,例如

close: function() {
    $(this).remove();
}

默认选项,无需在对话框创建时指定,但以某种方式在一个地方覆盖这些参数.

这可能吗？

我在jquery对话框中有一个kendo网格控件.它工作正常,除非在对话框模态为真时,我无法处理网格过滤器.如果对话框模态为false,则它可以正常工作.我必须应用模态真实的功能.

以下是问题的快照:

Jquery对话框代码:

$('#dialog').dialog({
  title: 'Add Patient',
  height: 'auto',
  width: '95%',
  position: ['top', 70],
  draggable: false,
  show: 'blind',
  hide: 'blind',
  modal: true,
  resizable: false,
  open: function (event, ui) {
    var url='@Url.Action("AddPatient", "PatientManagement")';
    $(this).load(url);
  },
  close: function (event, ui) {
    $(this).html('');
  }
});

剑道网格:

@(Html.Kendo().Grid<RxConnectEntities.Patient>().Name("PatientList")
  .Columns(columns =>
  {
    columns.Bound(p => p.PatientID).Visible(false);
    columns.Bound(p => p.LastName).Width(100);
    columns.Bound(p => p.FirstName).Width(100);
    columns.Bound(p => p.Gender).Width(80);
    columns.Bound(p => p.DateOfBirth).Width(90).Format("{0:MM/dd/yyyy}").EditorTemplateName("DateOfBirth");
    columns.Bound(p => p.PhoneNumber).Title("Phone Number").Width(110);
    columns.Command(command =>
    {
      command.Custom("Edit").Text("Edit").Click("EditGrid");
    }).Width(120);
  })
  .Filterable(f=>f.Enabled(true))
  .Pageable(p => p.PageSizes(true))
  .Scrollable()
  .Sortable()
  .Groupable()
  .DataSource(dataSource …

我的页面上有一个使用JQuery Dialog Widget创建的对话框.我已经设置了两个按钮,它们具有点击页面上不同按钮的功能,这些按钮将触发页面的回发并执行各种操作.当对话框为模态:false时,对话框将执行相关的clickButton函数,但是,当我设置modal:true时,虽然输入了该函数,但不会单击该按钮.

我想我错过了什么modal:true关于执行与按钮相关的功能.

下面是我的javasript

    function displayQuoteToCashMessage() {
        //this is where we do that alert for the QuoteToCash request stuff
        $("#<%=divQuoteToCashAlert.ClientId %>").show();
        $("#<%=divQuoteToCashAlert.ClientId %>").dialog({
            modal: false,
            resizable: false,
            buttons: {
                "Ok": function () {
                    //save confirmations
                    clickButton(true);
                    $(this).dialog("close");
                },
                "No": function() {
                    clickButton(false);
                    $(this).dialog("close");
                }
            }
        });        
    }

    function clickButton(b) {
        //do something with b
        document.getElementById(btnSave).click()
    };

我jQuery Dialog在这个Demo中创建了一个.它运作正常.关闭按钮显示在右侧.但在我的网站上,在localhost上运行,关闭按钮显示在左侧,如下图所示.

我怎么解决这个问题？

关闭按钮样式

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>

[解决]我写这个脚本.不幸的是,jQuery控制台抛出:

错误:在初始化之前无法调用对话框上的方法; 试图调用方法'打开'

我使用jQuery 1.10.2和jQuery UI 1.10.4.

 $(function() {
$("#player").on('click', 'img', function() {
    var zadanie = $( "input[name^='act']:checked:enabled" ).val();
    switch(zadanie){
        case '1':
        alert('fajowo jeste? uczciwy');
        break;
        case '2':
         $( "#dialog" ).dialog( "open" );
        break;
    }
    });
});

HTML中的对话框:

<div id="dialog" title="Wybór karty, która zostanie po?o?ona oficjalnie">
<p>Fajowy tekst.</p>
</div>