三井不動産レジデンシャル株式会社 御中
「三井の住まい 物件ページ」
モーダルウィンドウ設置調整について
2014 . 5．16
トランスコスモス株式会社
デジタルマーケティングサービス総括
ウェブインテグレーションサービス本部
モーダルウィンドウの設置箇所 修正
間取りページや全ページフッター部に設置するモデルルー
ム案内図はモーダルウィンドウでの表示をするために特定
のclassを設定しています。
該当するaタグにclass=“iframe”を付与します。
変更前 （旧 テンプレhtml）
変更後
<p class="mr10"><a class="ajax" href="plan/popup01.html"><img
src="plan/images/plan_img_01.gif" /></a></p>
<p class="mr10"><a class="iframe" href="plan/popup01.html"><img
src="plan/images/plan_img_01.gif" /></a></p>
<p class="mr10"><a class="ajax" href="plan/popup02.html"><img
src="plan/images/plan_img_01.gif" /></a></p>
<p class="mr10"><a class="iframe" href="plan/popup02.html"><img
src="plan/images/plan_img_01.gif" /></a></p>
<p><a class=“ajax" href="plan/popup03.html"><img
src="plan/images/plan_img_01.gif" /></a></p>
<p><a class="iframe" href="plan/popup03.html"><img
src="plan/images/plan_img_01.gif" /></a></p>
<li><a href="map.html"><img src="common/images/submenu_txt_01.gif"
alt="モデルルーム案内図" width="159" height="24" class="rollover"
/></a></li>
<li><a class="iframe" href="map.html"><img
src="common/images/submenu_txt_01.gif" alt="モデルルーム案内図"
width="159" height="24" class="rollover" /></a></li>
~ The Marketing Chain Management Company ~ transcosmos inc.
Proprietary and Confidential
-2-
全ページのヘッダー内記述 修正
ヘッダー内に共通で読み込むモーダルウィンドウ用の 「colorbox.css」 と 「jquery.colorbox-min.js」 がHTMLに記述されていない場合は、
呼び出す記述を追記して下さい。
変更前 （旧テンプレhtml）
変更後
<!-- ▽【commonArea_02】ここから下はコメントを含め変更・削除しないでください ▽ ->
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/css/module.css" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/css/resident_module.css" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/css/resident.css" media="all" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/component/jcarousel/skins/skin.
css" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/css/print.css" media="print" />
<!-- ▽【commonArea_02】ここから下はコメントを含め変更・削除しないでください ▽ ->
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/css/module.css" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/css/resident_module.css" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/css/resident.css" media="all" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/component/jcarousel/skins/skin.
css" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/resident/css/print.css" media="print" />
<link rel="stylesheet" type="text/css"
href="http://www.31sumai.com/common/component/colorbox/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"></script>
<script
src="http://www.31sumai.com/common/resident/component/jcarousel/jquery.jcaro
usel.min.js" type="text/javascript"></script>
<script src="http://www.31sumai.com/common/js/baseEvent.js"
type="text/javascript"></script>
<script src="http://www.31sumai.com/common/resident/js/resident.js"
type="text/javascript"></script>
<!--[if IE 6]>
<script type="text/javascript"
src="http://www.31sumai.com/common/resident/js/DD_belatedPNG.js"></script>
<script
type="text/javascript">DD_belatedPNG.fix('img,div,p,li,.bullet2,.bullet3');</script>
<![endif]-->
<!-- △【commonArea_02】ここから上はコメントを含め変更・削除しないでください △ ->
~ The Marketing Chain Management Company ~ transcosmos inc.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"></script>
<script
src="http://www.31sumai.com/common/resident/component/jcarousel/jquery.jcaro
usel.min.js" type="text/javascript"></script>
<script
src="http://www.31sumai.com/common/component/colorbox/jquery.colorboxmin.js" type="text/javascript"></script>
<script src="http://www.31sumai.com/common/js/baseEvent.js"
type="text/javascript"></script>
<script src="http://www.31sumai.com/common/resident/js/resident.js"
type="text/javascript"></script>
<!--[if IE 6]>
<script type="text/javascript"
src="http://www.31sumai.com/common/resident/js/DD_belatedPNG.js"></script>
<script
type="text/javascript">DD_belatedPNG.fix('img,div,p,li,.bullet2,.bullet3');</script>
<![endif]-->
<!-- △【commonArea_02】ここから上はコメントを含め変更・削除しないでください △
Proprietary and Confidential
-3-
モーダルで開く対象HTMLのヘッダー 修正
モーダルウィンドウ内で印刷を行う際には、
印刷用CSSを設定する必要があります。
テンプレートでは 「print_modal.css」 を設定しています。
読み込むCSSがHTMLに記述されていない場合は呼び出す
記述を追記して下さい。
変更前 （旧テンプレhtml）
変更後
<link rel="stylesheet" type="text/css"
href="../common/css/article_common.css" media="all" />
<link rel="stylesheet" type="text/css"
href="../common/css/article_module.css" media="all" />
<link rel="stylesheet" type="text/css"
href="../common/css/article_common.css" media="all" />
<link rel="stylesheet" type="text/css"
href="../common/css/article_module.css" media="all" />
<link rel="stylesheet" type="text/css"
href="../common/css/print_modal.css" media="print" />
~ The Marketing Chain Management Company ~ transcosmos inc.
Proprietary and Confidential
-4-
© Copyright 2025 ExpyDoc
