标签: jquery-ui-dialog

基本上我通过定位手动显示和隐藏Dialog所以像'swfupload'一样工作(不要问嘿嘿,我使用的多上传闪存控件无法隐藏或Flash做一些时髦的东西......所以我使用定位显示/隐藏对话框).

所以我将autoOpen:设置为true,这样当页面加载时不会被预先隐藏...而我只是使用jquery css用定位隐藏它,然后用display:none隐藏它的叠加层; (相对于css文件,因为我需要覆盖style =""元素)...现在我想隐藏它...

但Dialog自动创建的关闭按钮会自动调用其自己的关闭功能并设置'display:none'.我想覆盖它来做我的定位......

知道怎么重新分配吗？我想在某种程度上解除对它的点击事件的绑定并重新分配它.我不知道什么是真正做到这一点的最佳方式.

谢谢你的任何想法:)

我有一个带有验证插件设置的表单.提交表单并有错误时,我在对话框(非模态)中显示错误字段.

表单可以非常快速地完成(业务要求不断添加字段)并且我在对话框中使用errore'd字段可单击以将窗口滚动到from中的字段并突出显示字段.此时不会关闭该对话框.

此对话框以中心开头,一旦用户开始单击链接,我需要移出用户方式的对话框并突出显示(jQuery效果)下面的字段.

为此,我提出了以下代码,对话框似乎是动画到顶部但不是右边.当我将'right'改为'left'时,它运行正常.

下面是代码和jsbin一起玩 - http://jsbin.com/avigi3/4/

$('a.field').click(function(){
    $(this).closest('.ui-dialog').animate( {
        right : '0', /*left:'0' works fine here*/
        top : $(window).scrollTop()
    }, 'slow');
});

我调试了jQuery.animate代码,这是我的笔记:

1. jQuery.animate()'使用属性的当前值'启动'并逐渐动画到传入的目标值.例如,在调用中,top以对话框的当前最高值开始,并缩小为scrollTop的窗口(浏览器视口的可见顶部).
2. 现在,这就是问题所在.即使对话框是中心对齐的,它的'right'属性也不存在,因为jQuery-ui使用'left'属性来居中(绝对定位)对话框.由于'right'不存在,'right'的动画序列似乎不起作用.

有没有人面对这个问题？我有可能重置对话框的"正确"位置,以便它具有"某些"价值？或者我可以配置jQuery对话框,使其在以编程方式更改位置时动画,而不是通过拖动手动更改.

谢谢,
-Syam

我想在单击jquery模式弹出窗口内的按钮关闭jquery模式对话框后刷新aspx页面.我的页面中有更新面板,所以也要考虑它.

我正在使用jquery对话框弹出一个对话框.

对话框打开时会发生的情况是它按预期显示对话框,但是它会为页面增加额外的高度,并且在大多数屏幕分辨率下,这将导致在浏览器上显示垂直滚动条.显然没有什么可以向下滚动查看,所以非常不希望没有动态滚动条.我试过在整个页面上定位对话框div,但我无法摆脱它.它发生在ie和Firefox中.

这是代码的简化版本:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#divjQueryPopup').dialog({
            autoOpen: false,
            draggable: true,
            width: 500,
            open: function (type, data) {
                $(this).parent().appendTo('form');
            }
        });
    });

    function showDialog(id) {
        $('#' + id).dialog('open');
    }

    function closeDialog(id) {
        $('#' + id).dialog('close');
    } 
</script>


<div style="height: 500px;">
    <div style="height:500px;">
        <input id="inpTest" type="button" value="Test" onclick="showDialog('divjQueryPopup');" />
    </div>

    <div id="divjQueryPopup" runat="server">
        <div style="padding:10px 20px 10px 20px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
            sed diam nonummy nibh euismod tincidunt ut …

我正在使用这个对话框:

$("#myDialog").dialog({
    hide: {effect: "fade", duration: 3000},
    buttons: {
        Save: function() {
            $.post(someurl, function() {
                $("#myDialog").dialog( "close" );
            });
        },
        Cancel: function() {
            $("#myDialog").dialog( "close" );
        }
    }
});

我有两个在语义上不同的关闭动作:

1. 成功后关闭 - 在这种情况下,我想慢慢淡出对话框(我还显示一个绿色的Vee图标,未在上面的代码片段中显示).
2. 取消后关闭 - 我想立即让对话框消失,淡入淡出效果不适合IMO.

上面的代码只是.dialog("close")在两种情况下使用,所以当然两种情况都会产生相同的淡出效果.

在第二种情况下实现即时关闭的最佳方法是什么,同时在第一种情况下保持缓慢的淡出？

编辑:我还想要单击ESCAPE以获得与取消按钮完全相同的效果 - 即时淡出.

我使用jquery ui构建了一个Web应用程序.直到最近我才试图让它在ipad上兼容,除了jquery ui对话框之外,一切都在ipad上工作正常.我遇到了jquery touch,我喜欢'dialog'组件.

我如何检测浏览器是否是移动设备,并使用jQuery触摸对话框而不是标准的jquery ui对话框？谢谢!

我宣布了一个按钮:

<button id="create" type="button">add div</button>

每次我使用jQuery UI对话框单击按钮时,我想在文档正文中添加一个新的div元素,如下所示:

var form = $("<div>", {id:"form"});

    form.append(
        $("<input>")
            .attr({
                "type" : "text",
                "id" : "user-input"
            })
    )
    .dialog({
        width: 600,
        buttons: {
            "Ok": function() {
                var new_div = $("<div>").html($("#user-input").val()).addClass("destiny_div");
                new_div.appendTo($("body"));
                $(this).dialog("close");
            }}
    });

我第一次点击按钮它工作正常,但第二次,我写入输入文本框的文本没有使用新值更新,而是采用第一个放置的值.

例如,如果我第一次输入"hello"并单击"ok"按钮,则会在主体中添加一个新的div,其中包含文本"hello",但是当我第二次执行此操作时,现在键入"再见",将添加一个新的div,但文本中包含"hello",而不是"再见".

这是我的代码:http://jsfiddle.net/vWQ9T/

关于它为何如此工作的任何想法？谢谢

我在MVC 4中有一个表单,其中包含几个字段,并且根据组合的值,我需要打开一个模态对话框表单并加载到另外3个字段中,这些字段将影响我正在创建的同一个实体/在主窗体中编辑.对于这个模态对话框,我正在使用jQuery UI中的那个.

现在,我需要做的是验证(必需)模式对话框中的字段,以便允许用户保留输入的值,这些值稍后将由主窗体提交.

我的问题是如何从模态形式中执行这3个字段的验证(因为在对话框关闭之前它们将无法提交主窗体).

任何提示或想法？

此致,塞萨尔.

我想在JQuery UI对话框的标题栏(右上角)添加一个帮助图标.

我从默认的对话框演示开始

$('span.OK').click(function() {
    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);
});

这里是小提琴 http://jsfiddle.net/survivant/cyFxp/3/

我发现主题中有一个默认的帮助图标,但我不知道如何在标题栏中显示它.

目标是有一个？(帮助)按钮显示在X(关闭)按钮旁边.当我点击它时,我想要一个弹出窗口(可能是另一个对话框)来显示帮助.

编辑

感谢给出的答案,我现在有一个帮助图标,点击时会显示警告.但是,当鼠标悬停在该图标上时,光标是"移动"光标而不是像关闭按钮那样的"指针"光标.

如何防止"移动"光标支持"指针"光标？

PS.下面的答案中的演示适用于jsbin,但我在jsfiddle的演示不起作用.

我有这个样本:

https://jsfiddle.net/bac8qdq1/

HTML:

<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
    <p>test</p>
</div>

JQuery的:

$(document).ready(function () {
    $("#OpenDialog").click(function () {
        $("#dialog").dialog({
            modal: true,
            height: 590,
            width: 1005
        });
    });
});

我希望当用户点击链接打开时,会弹出一个新窗口,里面有一个文本区域.

我尝试了上面的代码,但遗憾的是它没有用...你能告诉我如何解决这个问题吗？我希望窗口打开并包含textarea元素.