地図の中心を表示したまま、マップの要素をクリック出来る様に改造します。
この方が、ドラッグ＆ドロップで地図をずらしたりしながら、地図中心を表示したまま陣張りしたりできますね。
前記事からの変更部分は赤色の文字色になります。
変更内容は、
・モーダルウインドウの要素をクリックできなくする
・不要となった関数を削除
・モーダルウインドウの透過率をアップ（０．３ → ０．１）
以下、moko のコード
① 関数の追加（ixa-moko.user.js）
// === 地図 ===
+ // 地図中心表示
+ function mapCenter(){
+ if (location.pathname != '/map.php') {
+ return;
+ }
+ $('#moko_vacant_panel').after('<button id="openModal">中心表示</button>');
+ var html = '<section id="modalArea" class="modalArea">' +
+ '<div id="modalBg" class="modalBg"></div>' +
+ '<div class="modalWrapper">×</div></section>';
+ $('.mapbox_container_wrap').after(html);
+ $(function () {
+ $('#openModal').on('click',function(){
+ $('#modalArea').slideToggle();
+ });
+ $('#modalBg').on('click',function(){
+ $('#modalArea').fadeOut();
+ });
+ });
+ }
// ミニマップ
function mapMinimap(flag) {
② 関数の登録（ixa-moko.user.js）
// === execute function ===
allPageCheck(); // all
＜中略＞
mapCheck(); // map
+ mapCenter(); // map
③ css の登録（main.css）
下記の記述を適当な場所に追加してください。
/* モーダルCSS */
.modalArea {
display: none;
position: fixed;
z-index: 502;
top: 326px;
left: 36px;
width: 740px;
height: 359px;
pointer-events: none;
}
.modalBg {
width: 100%;
height: 100%;
background-color: rgba(30,30,30,0.1);
pointer-events: none;
}
.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-80%,-80%);
width: 10%;
max-width: 0px;
padding: 0px 0px;
background-color: #fff;
color: white;
pointer-events: none;
}
/* モーダルボタンスタイル */
button#openModal {
appearance: none;
border: 0;
border-radius: 5px;
background: #4676D7;
color: #fff;
padding: 3px 6px;
font-size: 12px;
position:relative;
left:8px;
}