bootstrap 3-dialogは入れ子のiframeウィンドウを開けます.

4030 ワード

javascript

bootstrap 3-dialogは一つの第三者ヒントボックスプラグインですが、新しいリモートページを開くのはあまり友好的ではなく、フォームを開いて元のページに入れ子をしているとコードが大きく見えますので、bootstrap 3-dialogを二回パッケージして、新しいページをdialogに嵌め込んで、グローバル統一のページを開く方式を形成しています.
私達は二回パッケージを作る時に、自分の快速初期化dialogを使うことができません.新しいdialogを新たにnewして、属性の設定をします.先にコードを入れます.

function OpenDialog(id,title,url,height,width,callback) {
    height += 'px';
    var pagepath = GetRootPath()+url;
    var dialogInstance = new BootstrapDialog({
        onhidden:callback
    });
    dialogInstance.setId(id);
    dialogInstance.setTitle(title);
    dialogInstance.setMessage($('</div>'));
    //              ，                  dialog
    window.addEventListener('message', receiveMessage, false);
    function receiveMessage(tag) {
        var tag = tag.toString();
        if(tag='close'){
            dialogInstance.close();
        }
    }
    //          
    dialogInstance.setCloseByBackdrop(false);
    //       ，   realize  
    dialogInstance.realize();
    //  x            ，   div        ， dialog        
    dialogInstance.getModalHeader().find("[class='bootstrap-dialog-close-button']").unbind('click').click(function () {
        dialogInstance.onHidden(function () {

        })
        dialogInstance.getModal().modal('hide');

    });
    dialogInstance.getModalBody().css('height',height);
    dialogInstance.getModalDialog().css('width',width);
    dialogInstance.getModalBody().css('padding','0');
    dialogInstance.open();
}</code></pre>    まず、 たちのパッケージ  のいくつかのパラメータを てください.idはdialogのロゴです.titleはdialogのタイトル です.urlはネスト のページアドレスです.height/weightは / です.calbackはdialogがオフした のコールバック  です.たとえば、データが  された にページを じてコールバック  を  してリストページを  します.ページの れ はdialogの  にiframeを み むことによって  されますが、  のスタイルに  がありますので、modalbody、modaldialogのいくつかのスタイルを  しました.<br>    dialogはまた いたら じます.x  だけでページを じることはできません.これらのボタンをクリックしてページを じる  があります.そうすると、 たちはopenerとdialogで  を ります.ここではページへのメッセージ    を  しています.  されたメッセージを けたら、dialogを じます.このようにできるのは、dialogモーダルウィンドウが   に のページにdivとカバー を えているからです. は じページに しています.だから、お いにメッセージを ると  できます.dialogを じるコードは  の りです.<pre><code>function CloseDialog() {
    //$("[role='dialog']",window.parent.top.document).modal('hide');
    window.parent.postMessage('close', '*');
}</code></pre>    dialogの  についてはもう つの  があります.もしiframeの で を けたら、カバー とdialogはiframeを  にしていますが、  このようにウィンドウが さくて いにくいことがあります.だから、ここでもう つの  を  して、グローバルdialogを きます.iframeのトップクラスの に  します.これは  がソースコードに して さい  が  です.<pre><code> //      dialog    
            if(this.options.istop){
                this.getModal().appendTo($(window.top.document.body));
            }</code></pre><pre><code>  var $modal = this.getModal();
                var $backdrop = $modal.data('bs.modal').$backdrop;
                $modal.css('z-index', zIndexModal + (dialogCount - 1) * 20);
                $backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);
                //top        
                if(this.options.istop){
                    $backdrop.appendTo($(window.top.document.body));
                }</code></pre> く はモードウィンドウをトップウィンドウのbodyコンテンツに    し、モードウィンドウは じ  をすればいいです.    に ってきたパラメータです.<pre><code> var dialogInstance = new BootstrapDialog({
        istop:true,
        onhidden:callback,
        onshown:function () {
           /* $("div[role='dialog']").appendTo($(window.top.document.body));
            $("div[class^='modal-backdrop']").appendTo($(window.top.document.body));*/
        }
    });</code></pre>   のソースコードjs  :<br>https://github.com/grassprogramming/yblog/blob/master/main/resources/static/plugins/bootstrap3-dialog/js/bootstrap-dialog.js <br>  のパッケージのdialog.js:<br>https://github.com/grassprogramming/yblog/blob/master/main/resources/static/common/dialog.js <br> :<br>   はjquery、bootstrap-dialog.js、bootstrap-dialog.css、dialog.jsを  します.<br>コールの を  します.<pre><code>OpenDialog("editdialog","     ","pages/dmp/tablestruct_list.html?tablecode="+row.rowguid,600,1200,afterClose);</code></pre>

クロスドメインサービスコールの基本概念と解決方法