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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2935閲覧

mouseoverで表示させるポップアップにパラメータを渡す

sakura-shi

総合スコア93

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/10/08 04:33

編集2022/01/12 10:55

#やりたいこと
テーブルのセルに対しmouseoverのイベントで、ポップアップを表示させ、セルから渡されたパラメータを条件にしてポップアップの中を書き換えたい

#疑問点1
「Example ajax21.html」ボタンは、mouseoverでポップアップを表示させることには成功しているのだが、ポップアップの中にはformを置く必要があり、そのフォームへマウスを移動させる必要があります。
そのため、mouseoutでポップアップを隠すと、ポップアップ中のフォームにマウスを移動させることができません。
そのため、ポップアップを隠すイベントは、挙動という点では、mouseoutがよいのですが、mouseoutイベントは使えないと思います。
そこで、再度mouseoverのイベントでポップアップを隠すことを考えてみたのですが、どのようにjqueryを書けばいいか?

#疑問点2
たとえば、A社の2018-09-03の売上123,000円のセルにmouseoverした時には、
ポップアップには、A社の2018-09-03の売上明細を表示させる必要があるため、売上表からは、会社コードと日付をパラメータでポップアップに渡し、ポップアップを表示させたいのですが、各セルで、ポップアップを表示させるためにはどのようにしたらよいでしょうか?

#疑問点3
ポップアップの中(売上明細)の表の行が多くなると、ポップアップがすごく縦長になってしまうので、それを回避するため、iframeを使用しました。
iframeを使用せず、ポップアップを縦スクロールする方法はあるでしょうか?

#やってみたこと
■呼び出し側

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6<meta name="apple-mobile-web-app-capable" content="yes"> 7<meta name="description" content="popModal - jquery plugin for showing tooltips, titles, modal dialogs and etc"> 8<meta name="keywords" content="popup, dialog, notification-popups, modal-dialogs, html, javascript, notifications, modal, notify, confirm"> 9<title>popModal</title> 10<style> 11* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px} 12body {background:#f1f1f1} 13 14::-webkit-scrollbar {width:10px} 15::-webkit-scrollbar-track {background-color:#f1f1f1} 16::-webkit-scrollbar-thumb {background-color:#9699a2} 17::-webkit-scrollbar-thumb:hover {background-color:#555} 18 19#page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px} 20#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px} 21 22.pageCaption {margin-bottom:40px;font-size:34px;line-height:40px} 23.blockCaption {margin-bottom:20px;font-size:24px;border-bottom:1px solid #ddd;line-height:40px} 24 25#header {} 26.prjData {float:right;font-weight:500;line-height:24px;display:flex} 27.prjData > a {font-size:12px;display:inline-block;padding:0 10px;border-radius:3px;text-decoration:none;margin-left:5px;transition:all 0.2s ease-in-out} 28.prjData > a:hover {box-shadow:inset 0 0 0 30px rgba(0,0,0,0.2)} 29.prjData > .prjVer {background:transparent;color:#555;display:inline-block;padding:0 10px;margin-left:5px;font-size:12px} 30.prjData > .prjVer > span {margin-left:10px;font-size:12px;color:#999} 31.prjData > .prjDownloadLink {color:#fff;background:#0084ff} 32.prjData > .prjGitLink {color:#555;background:#ccc} 33.prjName {font-size:24px;font-weight:500;line-height:24px} 34.prjDesc {color:#777;margin-top:5px;font-size:90%} 35 36#footer {} 37.prjCopyright {color:#777} 38.prjLicense {float:right;font-size:12px} 39.prjAuthor {font-size:12px} 40 41 42.exampleContainer {margin:-1px 0 50px} 43.exampleContainer:last-child {margin-bottom:0} 44.exampleContainer .exampleLive {padding:20px 0;font-size:14px} 45.exampleContainer .exampleLive:after {content:'';clear:both;display:table} 46.exampleContainer .exampleLive .exampleLiveTitle {padding-bottom:10px} 47.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto;border-radius:4px} 48.exampleContainer .exampleCode pre {line-height:0} 49.exampleContainer .exampleCode code {white-space:pre-line} 50.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px} 51.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block} 52.exampleContainer .exampleCode code .tab {padding-left:15px} 53.exampleContainer .exampleCode code .tab2 {padding-left:30px} 54.exampleContainer .exampleCode code .tab3 {padding-left:45px} 55.exampleContainer .exampleCode code .tab4 {padding-left:60px} 56.exampleContainer .exampleCode code .tag {color:#97e0e9} 57.exampleContainer .exampleCode code .text {color:#fff} 58.exampleContainer .exampleCode code .key {color:#bf5c5b} 59.exampleContainer .exampleCode code .val {color:#fadf8c} 60.exampleContainer .exampleCode code .var {color:#aae997} 61.exampleContainer .exampleCode code .var2 {color:#b297e9} 62 63 64/* btn */ 65 66.btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px;transition:all 0.3s ease-in-out} 67.btn.btn-default {} 68.btn.btn-default:hover {background:#eee;border-color:#bbb} 69.btn.btn-default:focus {background:#ddd;border-color:#bbb} 70.btn.btn-primary {background-color:#0084ff;border-color:#0084ff;color:#fff} 71.btn.btn-primary:hover {background-color:#006dd2;border-color:#006dd2} 72.btn.btn-primary:focus {background-color:#0155a2;border-color:#0155a2;transform:translateY(1px)} 73.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa} 74.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important} 75 76.btn.btn-left {float:left;margin:0 5px 0 0!important} 77 78@media (max-width: 840px){ 79#page {width:auto;min-width:0;margin:20px 20px 100px} 80} 81</style> 82<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500"> 83<link type="text/css" rel="stylesheet" href="popModal.css"> 84</head> 85<body> 86 87<div id="page"> 88 89 <div id="header"> 90 <div class="prjName">popModal</div> 91 <div class="prjDesc">jquery plugin for showing tooltips, titles, modal dialogs and etc</div> 92 </div> 93 94 <div id="page_content"> 95 <div class="page_container"> 96 <div class="page" data-page="popModal"> 97 98 <div class="exampleContainer"> 99 <div class="exampleLive"> 100 <div class="exampleLiveTitle">loading ajax</div> 101 <button id="popModal_ex2" class="btn btn-primary">Example</button> 102 <button id="popModal_ex21" class="btn btn-primary">Example ajax21.html</button> 103 <br /><br /> 104                           <p>日別売上表</p> 105 <table border="1"> 106 <tr> 107 <th>日付/社名</th><th>A社</th><th>B社</th> 108 </tr> 109 <tr> 110 <td>2018-09-03</td><td>123,000円</td><td>456,000円</td> 111 </tr> 112 <tr> 113 <td>2018-09-10</td><td>789,999円</td><td>999,999円</td> 114 </tr> 115 </table> 116 </div> 117 </div> 118 </div> 119 </div> 120 </div> 121</div> 122 123<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> 124<script src="popModal.js"></script> 125<script> 126$(function(){ 127 128 $('#popModal_ex2').click(function(){ 129 $('#popModal_ex2').popModal({ 130 html : {url: 'ajax.html', errorText: 'An error has occurred'} 131 }); 132 }); 133 $('#popModal_ex21').mouseover(function(){ 134 $('#popModal_ex21').popModal({ 135 html : {url: 'ajax21.html', errorText: 'An error has occurred'} 136 }); 137 }); 138 //$('#popModal_ex21').mouseout(function(){ 139 // $('#popModal_ex21').popModal("hide"); 140 //}); 141 142 143$(window).scroll(function(){ 144 getActivePage(); 145}); 146getActivePage(); 147 148function getActivePage() { 149 var nav = $('.page'); 150 for (var i = 0; i < nav.length; i++) { 151 if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) { 152 $('.tab').removeClass('active'); 153 $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active'); 154 break; 155 } 156 } 157} 158 159$('.tab').click(function() { 160 $('html, body').animate({scrollTop: $('.page[data-page="'+$(this).attr('data-tab')+'"]').offset().top - 200}, 700, function(){ 161 getActivePage(); 162 }); 163}); 164 165$('.totop').click(function() { 166 $("html, body").animate({scrollTop: 0}, 700); 167}); 168 169}); 170</script> 171</body> 172</html>

■呼び出されるHTML(実際はPHPを使用)

HTML

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<html> 3<head> 4<title>Example</title> 5<meta name="description" content="あいうえお" > 6<meta name="robots" content="INDEX,FOLLOW" > 7<meta name="googlebot" content="INDEX,FOLLOW" > 8<meta name="author" content="かきくけこ" > 9<meta name="copyright" content="Copyright(C) 2001-2015 XX." > 10<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 11<meta name="robots" content="noydir,noodp" /> 12 13</head> 14<body > 15 <div id="header"> 16 <iframe id="if" title=" Frame Example" width="260" height="220" src="if.html"> 17 </iframe> 18 </div> 19---------------------------------------------------- 20This content loaded via ajax. 21</body> 22</html>

■呼びだされる側のフレームの中身(実際はPHPを使用)

HTML

1 <form> 2 <table width="200" height="1000" border="1"> 3 <tr> 4 <td height="500" align="top"> 5 <input type="radio" value="1" onchange="submit()">選択肢1 6 <input type="radio" value="2" onchange="submit()">選択肢2 7 <br><br> 8 あいうえお 9 </td> 10 </tr> 11 <tr> 12 <td height="500" align="top"> 13 かきくけこ 14 </td> 15 </tr> 16 </table> 17 </form>

https://github.com/vadimsva/popModal/releases
からダウンロードしたファイルを参考にしています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

■疑問点1への回答

javascript

1 $('#popModal_ex2').click(function(){ 2 $('#popModal_ex2_result').remove();//無くてもエラーにはならない 3 $('#popModal_ex2').popModal({ 4 html : {url: 'ajax.html', errorText: 'An error has occurred'} 5 });//ここで作成しているポップアップにid="popModal_ex2_result"を振る 6 }); 7 $('#popModal_ex21').mouseover(function(){ 8 $('#popModal_ex21_result').remove();//無くてもエラーにはならない 9 $('#popModal_ex21').popModal({ 10 html : {url: 'ajax21.html', errorText: 'An error has occurred'} 11 });//ここで作成しているポップアップにid="popModal_ex21_result"を振る 12 });

■疑問点2への回答
htmlに会社コードと日付をプログラムが扱い易い形式で出力しておき、それを取得してパラメータを渡すと良いです。

html

1 <table border="1"> 2 <tr> 3 <th>日付/社名</th><th>A社</th><th>B社</th> 4 </tr> 5 <tr data-date="2018-09-03"> 6 <td>2018-09-03</td><td data-cc="A社の会社コード">123,000円</td><td data-cc="B社の会社コード">456,000円</td> 7 </tr> 8 <tr data-date="2018-09-10"> 9 <td>2018-09-10</td><td data-cc="A社の会社コード">789,999円</td><td data-cc="B社の会社コード">999,999円</td> 10 </tr> 11 </table>

javascript

1 $('[data-cc]').mouseover(function(){ 2 $('#popModal_result').remove();//無くてもエラーにはならない 3 $(this).popModal({ 4 html : {url: 'ajax.html?cc=' + encodeURIComponent($(this).attr('data-cc')) + '&date=' + encodeURIComponent($(this).parent().attr('data-date')), errorText: 'An error has occurred'} 5 });//ここで作成しているポップアップにid="popModal_result"を振る 6 }); 7コード

■疑問点3への回答
呼びだされる側のformのcssにmax-heightとoverflow-y:auto;を適用すれば解決します

投稿2018/10/08 06:46

kaba

総合スコア314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/10/09 01:31

ありがとうございます さっそく試してみたのですが、例のHTMLで「123,000円」にmouseoverすると右隣のセルがさらに右へ移動してしまう、 という現象がでます。 これを解消するにはどうしたらよいのでしょうか?
kaba

2018/10/09 02:38

「右隣のセルがさらに右へ」と視覚的な表現をされても、htmlがどう変更されたのか、またはCSSがどう適用されたのか、jQueryオブジェクト.popModal()が何をしているかわからないので回答しようがないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問