在jquery对话框中将值返回给函数

时间:2013-08-27 08:53:24

标签: jquery dialog

我正在使用jquery对话框jquery。我在功能上有一些条件。我预付了一个类似于实际代码的演示,它正在本地工作,但不适合小提琴。我想要的是当用户点击“打开框”然后根据用户选择我们相应地改变。但问题是当用户点击“打开盒子”正在改变按摩时。它不会等到用户选择他的选择。我想用函数等待,直到用户选择他的选项然后提醒。 fiddle

<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>

<a href="javascript:checkvisible(0)">open box</a>

<div id="dialog" >
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>

<script type="text/javascript">
 var val= $('#dialog').dialog({autoOpen: false,  buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"cancel": function () {
$(this).dialog("close");
return false;
}
}});

function openTo(Id_, width_) {  
var divId = $('#' + Id_);
divId.dialog('option', 'width', parseInt(width_));
divId.dialog('option', 'show', 'clip');
divId.dialog('option', 'hide', 'clip');
divId.dialog('option', 'zIndex', 1000);
divId.dialog('open');
}

function showbox (){
openTo('dialog',200)
}

function checkvisible(notes){
if(notes){
// do something 
}

else {
var procees= showbox();
if(procees){
alert('ok')
}
else {
alert('cancelled')
}
}
}
</script>
</html>

1 个答案:

答案 0 :(得分:1)

对话框小部件异步工作,因此您不会从中返回任何值。解决方案是使用自定义事件处理程序和回调

jQuery(function ($) {
    var val = $('#dialog').dialog({
        autoOpen: false,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
                $(this).trigger('confirm');
            }, "cancel": function () {
                $(this).dialog("close");
                $(this).trigger('cancel');
            }
        }
    });
})


function openTo(Id_, width_, okCallback, cancelCallback) {
    var divId = $('#' + Id_);
    divId.dialog('option', 'width', parseInt(width_));
    divId.dialog('option', 'show', 'clip');
    divId.dialog('option', 'hide', 'clip');
    divId.dialog('option', 'zIndex', 1000);
    divId.dialog('open').off('confirm cancel').on('confirm', okCallback).on('cancel', cancelCallback);
}

function showbox(okCallback, cancelCallback) {
    openTo('dialog', 200, okCallback, cancelCallback)
}

function checkvisible(notes) {
    if (notes) {
        // do something 
    } else {
        showbox(function(){
            alert('ok')
        }, function(){
            alert('cancelled')
        });
    }
}

演示:Fiddle