window.open（＆＃8230;）を使用して控えめなモーダルdhtmlウィンドウにリファクタリングする方法は？

StackOverflow https://stackoverflow.com/questions/232662

  •  04-07-2019
  •  | 
  •  

質問

このように、javascriptウィンドウを起動する関数があります

    function genericPop(strLink, strName, iWidth, iHeight) {
            var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
            var new_window="";

            new_window = open(strLink, strName, parameterList);
            window.self.name = "main";
            new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
            new_window.focus();
}

この関数は、Webアプリケーションのさまざまな場所から約52回呼び出されます。

このコードをリファクタリングして、DHTMLモーダルポップアップウィンドウを使用します。変更はできるだけ目立たないようにする必要があります。

このソリューションを古いソリューションと同等に保つには、次のことも行う必要があると思います

  1. 「閉じる」へのハンドルを提供するウィンドウ。
  2. ウィンドウを移動できないようにし、画面の中央に配置します。
  3. オプションとして背景をぼかします。

このソリューションが私が望むものに最も近いと思いましたが、組み込む方法を理解できませんでした。

編集：あなたのカップルは私に良いリードを与えました。ありがとうございました。しかし、ここで私の問題を再度述べさせてください。既存のコードをリファクタリングしています。現在のHTMLまたはCSSを変更しないでください。理想的には、genericPop（...）の関数シグネチャも同様に保つことでこの効果を達成したいと思います。

役に立ちましたか？

解決

jQueryおよびjQuery UIライブラリを使用した私のソリューションです。 APIはには変更されませんが、パラメーター「name」は無視されます。 iframe を使用して特定の strLink からコンテンツを読み込み、生成された div の子としてその iframe を表示します。その後、jQueryを使用してモーダルポップアップに変換されます。

function genericPop(strLink, strName, iWidth, iHeight) {
  var dialog = $('#dialog');
  if (dialog.length > 0) {
    dialog.parents('div.ui-dialog').eq(0).remove();
  }

  dialog = $(document.createElement('div'))
    .attr('id', 'dialog')
    .css('display', 'none')
    .appendTo('body');

  $(document.createElement('iframe'))
    .attr('src', strLink)
    .css('width', '100%')
    .css('height', '100%')
    .appendTo(dialog);

  dialog.dialog({ 
      draggable: false,
      modal: true, 
      width: iWidth,
      height: iHeight,
      title: strName,
      overlay: { 
          opacity: 0.5, 
          background: "black" 
      } 
  });
  dialog.css('display', 'block');
}

// example of use
$(document).ready(function() {
  $('#google').click(function() {
    genericPop('http://www.google.com/', 'Google', 640, 480);
    return false;
  });
  $('#yahoo').click(function() {
    genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
    return false;
  });
});

jQuery UI / Dialogのドキュメント。

他のヒント

このダイアログコードを使用して、ほぼ同じこと。

正しく覚えていれば、デフォルトの実装はダイアログのサイズ変更をサポートしていません。 1つのサイズだけで作成できない場合は、コードまたはcssを変更して複数の幅を表示できます。

使い方は簡単です：

showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');

jsを変更して複数の幅をサポートする：

幅と高さを属性として追加してダイアログ機能を表示し、それらをダイアログおよびダイアログコンテンツ要素に行68で設定します

Control.Window を試してください。これにはプロトタイプが必要です

使用方法は次のとおりです。

<a href="/messages/new" class="popup_window">New Message</a>

そして私のJavaScriptファイルで：

$(document).observe("dom:loaded", function() {
  $("a.popup_window").each(function(element) {
    new Control.Modal(element, { overlayOpacity: 0.75, 
                                 className: 'modal',
                                 method: 'get',
                                 position: 'center' });
  });
});

現在開いているポップアップを閉じたい場合：

Control.Modal.current.close()
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top