#やりたいこと
1)mouseoverのイベント発生時に、当該tableのセルが右へひとつ移動してしまうのを防ぎたい
2)ポップアップウィンドウを表示させた後、そのポップアップウィンドウ内でクリックしてもポップアップウィンドウが閉じないようにしたい
ここで掲載した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...」となりなにも表示されなくなるという問題(現象)がでてきています。
予想ではありますが、
金額セルにマウスを乗った時はイベントが起きるので、ちょっとマウスを動かしただけでも内部で処理が行われる影響ではないかと思います。
マウスがセルから離れた時点で、その内部の処理を中断することはできるのでしょうか?