leafletのカスタムコントロールでcssモーダルウインドウの直接起動方法

js
1<script>
2var customControl =  L.Control.extend({
3  options: {
4    position: 'topright'
5  },
6  onAdd: function (map) {
7    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
8    container.style.backgroundColor = 'rgba(0, 0, 0 , 0.05)'; // 'white';     
9    container.style.backgroundImage = "url('images/iicon-2x.png')"; 
10
11    container.onclick = function(){
12      alert("iconClick");
13    /*****************************/
14      $('#modal-window')の起動方法
15    /*******************************/
16
17    }
18    return container;
19  } 
20});
21</script>
22
23<body>
24!--  modal window   -->
25  <a href="#modal-window" class="btn">Modal with Header/Footer</a>　←使わない
26  <!----------------------------------------------------------------->
27  <div class="modal-overlay" id="modal-window" >
28    <div class="modal-anima  animated fadeIn">  <!-- ←fadeInが設定 -->
29      <div class="modal-header">
30        <h3 class="header-title">マップ info</h3>
31        <a href="#" class="modal-close-icon" aria-label="close">&times;</a>
32      </div>
33     
34      <div class="modal-content">
35         <p style='text-indent:1em'>スマホでも簡単に見れるマップを作成しました。</a></p>
36      </div>
37      
38      <div class="modal-footer">
39        <a href="#" class="modal-close-btn" aria-label="Close">閉じる</a>
40      </div>
41    </div>
42  </div>
43</body>

行動規範の内容に同意します

回答1件

自己解決

javascript
1自己解決です
2window.location.href = '#modal-window'; // 通常の遷移

投稿2019/10/02 04:39

shin0859

総合スコア15

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

leafletのカスタムコントロールでcssモーダルウインドウの直接起動方法

関連した質問