0

別のウィンドウ内でモーダル ウィンドウを確認/メッセージ ポップアップとして使用しようとしていますが、回避できないかどうかわからない問題がいくつかあります。

これが私の状況のjsfiddleです: Fiddle

私が修正しようとしている問題は次のとおりです。

  1. appendTo を使用しながらモーダル ウィンドウを使用すると、バック ドロップに問題があるようです。

  2. ウィンドウではなくウィンドウ内でモーダルを中央に配置できれば素晴らしいと思います

  3. モーダルではドラッグが無効になっていますが、モーダルのタイトル バーをつかむと、外側のウィンドウが移動します。

  4. 「X」をクリックして内部モーダルを閉じると、外部ウィンドウが閉じます。

誰でもこれらの問題の解決策を提案できますか?

$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
  modal: true,
  resizable:false,
  draggable:false,
  appendTo: '#Window',
  close: function() {
    setTimeout(function(){
      $('#confirmWindow').kendoWindow('destroy');
    }, 200);
  }
});

$('#confirmWindow').find('#btnNo').click(function () {
    $('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
    $('#confirmWindow').kendoWindow('close');
});

編集

最初のフィドルは私が投稿しようとしていたものの古いバージョンだったので、フィドルを編集しました。

4

2 に答える 2

0

Telerikエンジニアからの応答を確認してください http: //www.kendoui.c​​om/forums/kendo-ui-web/window/kendowindow-appendto-boundaries.aspx 

<script type="text/javascript">
    $(document).ready(function () {
        $("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {

        var wnd = $("#window").data("kendoWindow");
        var position = wnd.wrapper.position();

        var minT = 0;
        var minL = 0;
        //Get the Window width and height and
        //place them in position of the hard-coded width and height
        var maxT = 600 - wnd.wrapper.height();
        var maxL = 900 - wnd.wrapper.width();

        if (position.left < minL) {
            coordinates = { left: minL };
            $(wnd.wrapper).css(coordinates);
        }

        if (position.top < minT) {
            coordinates = { top: minT };
            $(wnd.wrapper).css(coordinates);
        }

        if (position.left > maxL) {
            coordinates = { left: maxL };
            $(wnd.wrapper).css(coordinates);
        }

        if (position.top > maxT) {
            coordinates = { top: maxT };
            $(wnd.wrapper).css(coordinates);
        }
    })
})
</script>
于 2013-09-19T21:12:22.520 に答える