2

このような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（...）の関数シグネチャも同じに保つことで、この効果を実現したいと思います。

4

3 に答える 3

3

これがjQueryとjQueryUIライブラリを使用した私のソリューションです。APIは変更されません、ただしパラメータ'name'は無視されます。iframe与えられたものからコンテンツをロードし、それを子として生成されたstrLinkものとして表示するために使用します。これは、jQueryを使用してモーダルポップアップに変換されます。iframediv

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のドキュメント。

于 2008-10-24T12:49:02.467 に答える
2

このダイアログ コードを使用して、ほとんど同じことを行います。

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

使い方は簡単です:

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

複数の幅をサポートするように js を変更します。

ダイアログ機能を表示する属性として width と height を追加し、それらを 68 行目の dialog 要素と dialog-content 要素に設定します。

于 2008-10-24T06:59:37.037 に答える
1

プロトタイプが必要な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()
于 2008-10-24T07:20:15.840 に答える