質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.46%

  • JavaScript

    21022questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery UI

    190questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

showModalDialogの代替方法について

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 31K+

syes

score 2

前提・実現したいこと

showModalDialog()を多用しているWEBシステムにおいて、
Edgeブラウザ対応を実施したいと考えております。

Edgeでは、showModalDialog()が機能しなくなるため、
代替するダイアログにて改修しようとしている中で、
現状、jQuery UI dialogでの代替をすすめています。

既存処理が別ページのHTMLをダイアログ内に表示しているため、
iFrameを利用してdialog内に表示しているのですが、
既存ページ内の任意のボタンアクション(「保存」や「キャンセル」など画面毎に異なる)結果を
呼び出し元のページに渡したいのですが、その渡し方が現状不明な状況です。

iframe外の親画面とiframe内の子画面間のデータの受け渡し方法はネット上等に情報があるのですが、
ダイアログ自体(iframe外の親画面)の呼び出し元になる「親画面」と、
「iframe内の子画面」間のデータの受け渡し方法(呼び出し元での処理方法)を
ご教示いただきたいと存じます。

また、showModalDialogの代替方法として別手法をご存知でしたら、
ご教示いただけると幸いです。

何卒よろしくお願い申し上げます。

補足情報(言語/FW/ツール等のバージョンなど)

VB.NET
VS2005
jQuery
AJAX

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

最少構成です。aspxではなくて、java ですが、やりたいことを実現するにはサーバーげんごは問いません。

親画面に記述

jquery,jqueryuiの参照は済んでるとする
<div style="display: none">
<div id="modal">
   <div id="outer">
      <div id="inner">
          <iframe src="" id="ifr"></iframe>
      </div>
    </div>
</div>
</div>
<script>
// jquery ui dialog 初期化、済みとする。
$("modal").dialog({.....});
// プロパティは、autoOpen: false, modal: true,title: 適当

//ダイアログを開くメソッドの定義
function showDialog() {
    $("#modal").dialog("open");
    $("#ifr").attr("src", "bbb.aspx");
}
// iframe 内、bbb.aspx から呼び出されるメソッドの定義
var ifrdlgs = {
    save: function() {
        alert("save callback called");
    },
    cancel: function() {
        alert("cancel callback called");
    }
};


</script>

テスト用ダイアログ起動ボタン
<button onclick="showDialog()">kidou</button>
次に、bbb.aspx です。
少々面倒。
保存ボタン
   押下されると、サーバー処理が動作する。サーバー処理が戻すhtmlを以下のように定義する。
   <script> window.onload = function() { save(); }</script>
キャンセルボタン
   押下されると、サーバー処理が動作する。サーバー処理が戻すhtmlを以下のように定義する。
   <script> window.onload = function() { cancel(); }

共通
<script>
function save() {
    parent.ifrdlgs.save();
}
function cancel() {
    parent.ifrdlgs.cancel();
}
</script>

以上です、大分端折りましたけど、これで動作します。実験済みなので、動かない場合は具体的に示してください。開発者画面、デバッグコンソールなどを駆使すれば、30分くらいで雛形完成です。
まずは、最小構成の雛形を作って、これで動きはオッケー、なのを確認してから、実際のソースを触るようにしてください。

保存ボタン処理が返すhtml

<script> parent.ifrdlgs.save() </script>

キャンセルボタン処理が返す html
<script> parent.ifrdlgs.cancel() </script>

bbb.aspx が返す html
jquery,jqueryui , css その他ロード済みとする。iframe 内のコンテンツなので、親でロード済みですが、それらは、ifrane 内には反映されないので別途読み込みます。
<script>
$(function() {
   $("input[type=button]").button();
});

親画面の ifrdlgs.save メソッド内で、$("#modal").dialog("close"); すればオッケー。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/01 09:56

    右上の「x」ボタン、キャンセル方法が2つあるのはいまいちですね。
    消すのが 面倒でづが、dom インスペクタでノードを辿ればヒントが見つかります。
    キャンセルボタンでもサーバ処理をやってる様子なので、この❎ボタンは消した方が
    良いのでは?と思いました。

    キャンセル

  • 2016/03/01 10:48

    早急で具体的な雛形制作や検証方針のご教示まで頂戴し、
    まことにありがとうございます。
    ご教示いただいた内容にて作成・検証を進めてまいりたいと存じます。

    作成、既存ソースとの融合、検証に少し時間を要するかと思いますので、取り急ぎのお礼申し上げます。
    また、検証中に質問させていただくこともあるかと存じますが、何卒よろしくお願い申し上げます。

    まずは、お礼のみにて失礼いたします。

    キャンセル

  • 2016/03/04 18:23

    ご連絡が遅くなり恐縮ですが、
    おかげさまでご教示いただいた内容を雛形として、showModalDialogのjQueryのダイアログにて代替処理を作成することができました。
    まことにありがとうございました。

    キャンセル

-1

showModalDialog の2番目のパラメータがオブジェクトです。
window を渡せば、親の資源すべてにアクセスできます。
代替は、jquery-ui のモーダルパネルが候補ですが、showModalDialog
の書式を活かす方向で実装するとなると、

window.shoModalDialog = function(url, param, options) {
    // options を ; で分割、要素それぞれ、= で分割、各パラメータを、jquery-ui のダイアログ初期化に利用して、モーダルパネルを表示する、ような仕掛けになると思われます。
url はそれぞれ固有の画面の jsp,php を指し示していると思うので、url の部分文字列から、どのような体裁のダイアログを表示するか判断できるかもしれません。
iframe 利用の場合、iframe内から、top や parent をターゲットに画面更新させる処理がある場合、モーダルパネルでは、全画面が対象になってしまいます。面倒ですけど、ifraneの中に表示する画面の html を修正するか、同じドメインなら、onload/onreadystatechange などで iframe 内コンテンツのロードイベントをハンドルできるので、そこで親画面を更新するようなボタンイベントやリンク、フォームなどは設定変更してあげる必要がありますね。

モーダルダイアログ内で、iframe ということは、post や部分書き換えが絡む話だと思いますが、今までは、<base target="self"> とかやって、モーダルダイアログ内でポスト処理をやってたと思いますが、モーダルダイアログの垣根が取っ払われてしまうので、、、、確証無いですが、iframe をネストさせれば、最も内側の iframe の top は、最も外側の iframeになるかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/26 11:01

    早速のご回答まことにありがとうございます。
    各種方針や手法のご教示参考になりました。

    その中で1点確認させていただきたいのですが、
    「window 」をパラメータとしてjquery-ui dialogに渡す具体的なロジック例をご教示いただけないでしょうか?
    dialogに渡せるパラメータ(オプション)は以下のURL内容と認識しているのですが、
    その他の渡したいパラメータ(今回はwindow)をどのように渡してdialog内で活用すればよいかご教示いただけると幸いです。
    http://jqui.my-learn.net/dialog/options.php

    素人質問で恐縮ですが、何卒よろしくお願い申し上げます。

    キャンセル

  • 2016/02/26 12:30 編集

    jquery-ui は、別プロセスでも、別スレッドでもありませんよ。
    別に渡す必要無いと思うけど、iframe のことを懸念されてるなら、
    もっと情報を開示してください。現在の showmodaldialogの代替と
    して、jquery-ui を考えてるのは分かるんですが、知りたいのは
    改修前のプログラムの構造です。
    #なんか iPadで使い難くなった気がする、ios9 にアップデートしてからだ。特にスクロールとコピペがイライラする、、、、

    コピペできなくなったぞ、、、、なんでだ?

    キャンセル

  • 2016/03/01 00:45

    早速のご返信を頂いたにも関わらず、気づかず返答遅く申し訳ありません。
    (コメントへのご返答は、メール通知されないんですね、知らず失礼いたしました)

    そして、ご丁寧にご指示いただいた改修前のプログラム構成概要を以下に記載させていただきます。

    ●showModalDialogを利用した既存の親画面・子画面の抜粋サンプルロジック
    ■AAA.aspx(呼び出し元親画面)
    <script language="javascript" type="text/javascript">
    <!--
    //ボタン等任意のアクション時にshowModalDialogで子画面表示し、戻り値に応じて親画面への反映処理を実施
    function xxOpenDialog(){
    var rtn = showModalDialog("BBB.aspx","BBB","dialogWidth=650px;dialogHeight=500px;scrollbars=yes;center=yes;help=no;status=no");
    if ( rtn == "OK" ) {
    document.getElementById("XXXX").value = "1";
    dspHogeHoge(0);
    }
    }
    // -->
    </script>


    ■BBB.aspx(子画面)
    //画面上でデータ検索して選択や詳細情報を編集して「保存」or「キャンセル」のボタンアクションが主
      <asp:Button ID="btnOK" runat="server" CssClass="btnOk" Text="保存" OnClick="btnOK_Click"/>
      <asp:Button ID="btnCancel" runat="server" CssClass="btnOk" Text="戻る" OnClick="btnCancel_Click"/>
      
      ※各ボタンアクション処理はロジック(aspx.vb)側で処理


    ■BBB.aspx.vb(子画面ロジック)

      //アクションに応じた値の設定および自(子)画面のクローズ処理をscriptの出力ロジックにて実施(「保存」の例)
      Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    '内部的な保存処理等
    Call lcSave()

    '保存実施
    Dim sbScript As New System.Text.StringBuilder
    With sbScript
    .Append("<script language=javascript>")
    .Append("window.returnValue = """ & OK & """;")
    .Append("self.window.opener=window;")
    .Append("self.window.close();")
    .Append("</script>")
    End With

    Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, "CloseDialog", sbScript.ToString)

    End Sub

    **************************************************************

    そして、あわせて現状想定しているjQuery UI dialogの改修想定案の構成を以下に記載させていただきます。

    ●jQuery UIのdialogを利用した改修想定の親画面・子画面の抜粋サンプルロジック
    ■AAA.aspx(呼び出し元親画面)
    <script language="javascript" type="text/javascript">
    <!--
    //jQueryのdialogを任意のボタンに関連付け(iframeDialogというプラグイン利用)
    $(function(){
    var rtn = $('#btn1').iframeDialog({
    id: 'BBB',
    url: 'BBB.aspx',
    scrolling: 'auto',
    modal: true,
    resizable: false,
    width: 650,
    height: 500
    });
    });
    // -->
    </script>

    ■iframeでdialog表示用の「iframeDialog」プラグイン
    (function ($) {
    $.fn.iframeDialog = function (options) {
    this.each(function () {
    $(this).unbind('click').click(function (e) {
    e.preventDefault();
    var $div = $("<div/>");
    $div.attr("id", "iframeDialog_id");
    var $iframe = $('<iframe class="iframeDialog" name="iframeDialog{rnd}" frameborder="0" width="100%" height="100%" marginwidth="0" hspace="0" vspace="0" scrolling="no" allowtransparency="true" />');
    if (!options.title) {
    options.title = $(this).attr('title');
    }
    if (!options.url) {
    url = $(this).attr('href');
    } else {
    url = options.url;
    }
    if (!options.close) {
    options.close = function () {
    $(this).remove();
    };
    }
    if (options.id) {
    $iframe.attr("id", options.id);
    }
    if (options.scrolling) {
    $iframe.attr("scrolling", options.scrolling);
    }
    $iframe.attr("src", url);
    $div.append($iframe).dialog(options);
    });
    });
    return this;
    };
    })(jQuery);


    ■BBB.aspx.vb(子画面ロジック)
      //アクションに応じた値の設定および自(子)画面のクローズ処理をscriptの出力ロジックにて実施(「保存」の例)
      // ※想定内容および不明点を以下ロジック内に記載
      Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    '内部的な保存処理等
    Call lcSave()

    '保存実施
    Dim sbScript As New System.Text.StringBuilder
    With sbScript
    .Append("<script language=javascript>")
    .Append("window.returnValue = """ & OK & """;")
    .Append("self.window.opener=window;")
    .Append("window.parent.jQuery('#iframeDialog_id').dialog('close').remove();")

    // ここで呼び出し元の親画面に反映処理用メソッド等を新たに用意して、
    // それを呼び出す処理をscriptへ記載・出力するのが妥当かと考えましたが、
    // ブラウザのデバックなどでも呼び出し元の親画面情報が「window.parent」等に無く、取得方法が不明であることと、
    // そもそもこの想定が妥当か否か等が不明な状況です。

    .Append("</script>")
    End With

    Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, "CloseDialog", sbScript.ToString)

    End Sub

    **************************************************************

    上記内容をご覧いただき、ご指摘、ご教示などいただけると幸いです。
    何卒よろしくお願い申し上げます。

    キャンセル

  • 2016/03/01 01:17 編集

    新雨実現方法を書いたので削除

    キャンセル

  • 2016/03/01 01:56 編集

    新しい実現方法を書いたので削除

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.46%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21022questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery UI

    190questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。