Q&A
UTLとは？
#やりたいこと
１）mouseoverのイベント発生時に、当該tableのセルが右へひとつ移動してしまうのを防ぎたい
２）ポップアップウィンドウを表示させた後、そのポップアップウィンドウ内でクリックしてもポップアップウィンドウが閉じないようにしたい
ここで掲載したHTMLしたtableのサイズは小さいですが、実際は、800くらいのセルのあるtableです。縦40＊横20のtableの全セルに対し、パラメータを除き同様のポップアップを表示させるようにする。
ポップアップでクリックすると、ポップアップの下に隠れているセルをクリックしてしまうのか？？ポップアップ内でクリックしてもポップアップが閉じないようにしたいです。
コンソールにエラー出力がなく、ポップアップ自体は正常に表示されるところまでは確認すみ。
#やってみたこと
ここでは小さなサイズのtableを掲載していますが、実際はもっと大きなtableです。
■呼び出し側
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 11<style> 12* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px} 13body {background:#f1f1f1} 14 15::-webkit-scrollbar {width:10px} 16::-webkit-scrollbar-track {background-color:#f1f1f1} 17::-webkit-scrollbar-thumb {background-color:#9699a2} 18::-webkit-scrollbar-thumb:hover {background-color:#555} 19 20#page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px} 21#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px} 22 23.pageCaption {margin-bottom:40px;font-size:34px;line-height:40px} 24.blockCaption {margin-bottom:20px;font-size:24px;border-bottom:1px solid #ddd;line-height:40px} 25 26#header {} 27.prjData {float:right;font-weight:500;line-height:24px;display:flex} 28.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} 29.prjData > a:hover {box-shadow:inset 0 0 0 30px rgba(0,0,0,0.2)} 30.prjData > .prjVer {background:transparent;color:#555;display:inline-block;padding:0 10px;margin-left:5px;font-size:12px} 31.prjData > .prjVer > span {margin-left:10px;font-size:12px;color:#999} 32.prjData > .prjDownloadLink {color:#fff;background:#0084ff} 33.prjData > .prjGitLink {color:#555;background:#ccc} 34.prjName {font-size:24px;font-weight:500;line-height:24px} 35.prjDesc {color:#777;margin-top:5px;font-size:90%} 36 37#footer {} 38.prjCopyright {color:#777} 39.prjLicense {float:right;font-size:12px} 40.prjAuthor {font-size:12px} 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/* btn */ 64 65.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} 66.btn.btn-default {} 67.btn.btn-default:hover {background:#eee;border-color:#bbb} 68.btn.btn-default:focus {background:#ddd;border-color:#bbb} 69.btn.btn-primary {background-color:#0084ff;border-color:#0084ff;color:#fff} 70.btn.btn-primary:hover {background-color:#006dd2;border-color:#006dd2} 71.btn.btn-primary:focus {background-color:#0155a2;border-color:#0155a2;transform:translateY(1px)} 72.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa} 73.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important} 74 75.btn.btn-left {float:left;margin:0 5px 0 0!important} 76 77@media (max-width: 840px){ 78#page {width:auto;min-width:0;margin:20px 20px 100px} 79} 80</style> 81<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500"> 82<link type="text/css" rel="stylesheet" href="popModal.css"> 83</head> 84<body> 85<div id="page"> 86 <div id="header"> 87 <div class="prjName">popModal</div> 88 <div id="page_content"> 89 <div class="page_container"> 90 <div class="page" data-page="popModal"> 91 <div class="exampleContainer"> 92 <div class="exampleLive"> 93 <p>日別売上表</p> 94<table border="1"> 95<tr> 96 <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th> 97</tr> 98<tr data-date="2018-10-01"> 99 <td>2018-10-01</td> 100 <td><span data-cc="100">123,000円</span></td> 101 <td><span data-cc="101">456,000円</span></td> 102 <td><span data-cc="102">789,000円</span></td> 103</tr> 104<tr data-date="2018-10-02"> 105 <td>2018-10-02</td> 106 <td><span data-cc="100">123,000円</span></td> 107 <td><span data-cc="101">456,000円</span></td> 108 <td><span data-cc="102">789,000円</span></td> 109</tr> 110<tr data-date="2018-10-03"> 111 <td>2018-10-03</td> 112 <td><span data-cc="100">123,000円</span></td> 113 <td><span data-cc="101">456,000円</span></td> 114 <td><span data-cc="102">789,000円</span></td> 115</tr> 116<tr data-date="2018-10-04"> 117 <td>2018-10-04</td> 118 <td><span data-cc="100">123,000円</span></td> 119 <td><span data-cc="101">456,000円</span></td> 120 <td><span data-cc="102">789,000円</span></td> 121</tr> 122<tr data-date="2018-10-05"> 123 <td>2018-10-05</td> 124 <td><span data-cc="100">123,000円</span></td> 125 <td><span data-cc="101">456,000円</span></td> 126 <td><span data-cc="102">789,000円</span></td> 127</tr> 128<tr data-date="2018-10-06"> 129 <td>2018-10-06</td> 130 <td><span data-cc="100">123,000円</span></td> 131 <td><span data-cc="101">456,000円</span></td> 132 <td><span data-cc="102">789,000円</span></td> 133</tr> 134</table> 135</div> 136</div> 137</div> 138</div> 139</div> 140</div> 141 142<script src="./js/jquery-2.1.4.min.js"></script> 143<script src="popModal.js"></script> 144<script> 145jQuery(function($){ 146 $('[data-cc]').mouseover(function(){ 147 $('#popModal_result').remove(); 148 $(this).popModal({ 149 html : { url: '/example/list', 150 method: 'GET', 151 data: { 'cc': encodeURIComponent($(this).attr('data-cc')), 152 'date': encodeURIComponent($(this).attr('data-date')) }, 153 dataTYpe: 'html', 154 loadingText: 'Please wait...', 155 errorText: 'An error has occurred' 156 } 157 }); 158 $('.popModal').css({top:"",left:""}).on('click',function(e){ 159 e.stopPropagation(); 160 }); 161}); 162}); 163 164 $(window).scroll(function(){ 165 getActivePage(); 166 }); 167 getActivePage(); 168 169 function getActivePage() { 170 var nav = $('.page'); 171 for (var i = 0; i < nav.length; i++) { 172 if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) { 173 $('.tab').removeClass('active'); 174 $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active'); 175 break; 176 } 177 } 178 } 179 180}); 181</script> 182</body> 183</html>
■呼び出されるHTML
直にアドレスバーでURLを入力し表示されることを確認済
https://github.com/vadimsva/popModal/releases
からダウンロードしたファイルを参考にしています
==============================================
呼び出し側のJSを修正しました。
いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Please wait...」となりなにも表示されなくなるという問題（現象）がでてきています。
予想ではありますが、
金額セルにマウスを乗った時はイベントが起きるので、ちょっとマウスを動かしただけでも内部で処理が行われる影響ではないかと思います。
マウスがセルから離れた時点で、その内部の処理を中断することはできるのでしょうか？
正しくはURL
「});」が一つ足りないような・・・
単純な誤記かも・・。ポップアップ自体は表示されることまでは確認済です
デバッグ機能を使って、デバッグをされましたか？
ロード時にコンソールにエラーはありません。その確認はしています。
mouseover時にも、コンソールにエラーは表示されないところまで確認しています
いえ、エラーがでるかどうかではなく、そうなる原因を探すことを目的としてください。関連する変数を見たり、おかしそうなものをconsole.logで出力してみたり、いろいろやりようはありますが。
今の場合、セルが右へ移動という現象、ポップアップでクリック時にconsole.logかと思いますが、私にはどこにconsole.logを入れるか？その引数を何にするのかわかりませんでした。どのようにしたらよいでしょうか？
ご提示のソースがそもそも正常に不具合を出せませんので、まずは動くソースを提示するところからじゃないですか？
たとえば、(1)であれば、マウスオーバー時に実行されるメソッドの中にブレークポイントを置いておき、どの行が悪さしてるかを見ていったり、要素やスタイルの検証機能で意図しないスタイルがついているかなどを確認したりします。
そもそもデバッグができなくて質問を投げる人が多い印象を受けます。デバッグができないので必要な情報を提示できていないのかな…と。今時はブラウザに標準でデバッグ機能が付いていますので、そちらを使うことを念頭に問題解決に取り組まれるのがよいかと。
掲載したコードに誤字がありました。正常に・・イベント発生時にセルがみぎへ移動すること、ポップアップの上でクリック時にポップアップが消えること、再確認しました
掲載したコードに誤字がありました。正常に・・イベント発生時にセルがみぎへ移動すること、ポップアップの上でクリック時にポップアップが消えること、再確認しました
回答2件
0
ようやくちょっと理解しました。
tdにdata-ccをつけるのはNGです。
popModalは対象タグの後ろにdivを挿入するのでテーブル構造が崩れ
おかしなことになっています。
spanなど適当なタグで囲って処理してください
HTML
1 <td data-cc="100">123,000円</td> 2 <td data-cc="101">456,000円</td> 3 <td data-cc="102">789,000円</td> 4 5 ↓↓↓ 6 7 <td><span data-cc="100">123,000円</span></td> 8 <td><span data-cc="101">456,000円</span></td> 9 <td><span data-cc="102">789,000円</span></td>
クリック
stopPropagationでバブリングを抑制すると少しはましになるかも。
javascript
1<link rel="stylesheet" href="popModal.css" type="text/css"> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 3<script src="popModal.js"></script> 4<script> 5$(function(){ 6 $('[data-cc]').on('mouseover',function(){ 7 $(this).popModal({ 8 html:'hoge', 9 }); 10 $('.popModal').css({top:"",left:""}).on('click',function(e){ 11 e.stopPropagation(); 12 }); 13 14 }); 15}); 16 17</script> 18<table border="1"> 19<tr> 20 <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th> 21</tr> 22<tr data-date="2018-10-01"> 23 <td>2018-10-01</td> 24 <td><div data-cc="100">123,000円</div></td> 25 <td><div data-cc="101">456,000円</div></td> 26 <td><div data-cc="102">789,000円</div></td> 27</tr> 28<tr data-date="2018-10-02"> 29 <td>2018-10-02</td> 30 <td><div data-cc="100">123,000円</div></td> 31 <td><div data-cc="101">456,000円</div></td> 32 <td><div data-cc="102">789,000円</div></td> 33</tr> 34<tr data-date="2018-10-03"> 35 <td>2018-10-03</td> 36 <td><div data-cc="100">123,000円</div></td> 37 <td><div data-cc="101">456,000円</div></td> 38 <td><div data-cc="102">789,000円</div></td> 39</tr> 40</tbody> 41</table>
投稿2018/10/22 07:51
編集2018/10/22 13:37総合スコア114779
ありがとうございます。
一点目解決です！
コードも修正しました
もう一点
ポップアップの上でクリックするとポップアップが消えてしまう件、おわかりでしょうか？
バブリングの問題かもしれないので、一応対応追記しておきました
関係ないかもしれません。
0
オプションで設定できる範囲の話を書いてみます。
■クリックで消したくない話
デフォルトで、オプションonDocumentClickClose=trueになっており、これだと画面内どこをクリックしても、ポップアップが消えるようになっています。
で、onDocumentClickCloseをfalseにすると、画面内どこをクリックしても、ポップアップが消えなくなります。
ざっとコードを見た限りでは、
「ポップアップ内だけ」「ポップアップ外だけ」をクリックしたら消せる・消せない・・
といった細かい調整はできなさそうでした。
なので、「ポップアップ外クリックでポップアップを消したい」のであれば、
popModalのonDocumentClickCloseはfalseにした上で、「ポップアップ外クリック時にポップアップを消す処理」を自分で記述するか、popModalを改造するかの2択かも・・・。
なお、ポップアップ内の「×」ボタンも消したければ、showCloseButをfalseに。
■横にはみ出る話
既に解決済みなのは承知しておりますが、オプションの話ついでの、余談です。
デフォルトで、オプションinline=trueになっており、これだとイベントの発生した要素のすぐ「後ろ」にポップアップの要素を設置するようです。
inlineをfalseに設定することで、ポップアップの要素が<body>の最後に追加されるようになるので、レイアウトが崩れることはなくなります。
ただし、window幅によってオプションinlineが強制trueになるような記述があったので、yambejpさんの書かれた「spanなど適当なタグで囲って処理」する方法でないと、根本的な解決にはならないので、あくまで余談・・
■オプションの記述は、まとめるとこんな感じです
javascript
1$(this).popModal({ 2 html : { 3 url: '/example/detail?cc=' + encodeURIComponent($(this).attr('data-cc')) + '&date=' + encodeURIComponent($(this).parent().attr('data-date')), 4 errorText: 'An error has occurred' 5 }, 6 onDocumentClickClose: false, //画面内クリックでポップアップを消さない 7 showCloseBut: false, //ポップアップ内の「×」ボタンを表示しない 8 inline: false, //ポップアップ要素の設置場所の変更 9});
投稿2018/10/23 02:24
総合スコア1910
ありがとうございます。
いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Please wait...」となりなにも表示されなくなるという問題（現象）がでてきています。
恐れ入りますが、この点おわかりでしょうか？
うーん。こちらではその症状は確認できないですね。
popModalではなく、取得しているURL（/example/detail）に問題があるのかもしれませんね。
そちらの処理にすごく時間がかかっていて、URLからレスポンスが返ってこない・・とか？
コンソール見たら、レスポンスが返ってきているかがわかると思いますが、どうなっているでしょうか？
ちなみに、今時点の掲載コードだと、URLに渡しているdateの値が取得できていないです。
html
<tr data-date="2018-10-01">
<td>2018-10-01</td>
<td><div data-cc="100">123,000円</div></td>
<td><div data-cc="101">456,000円</div></td>
<td><div data-cc="102">789,000円</div></td>
</tr>
javascript (かなり省略版)
$('[data-cc]').mouseover(function(){
console.log($(this).attr('data-date')); // undefinedになります
});
あなたの回答
tips
プレビュー
