app/template/default/Block/index.twig line 1

Open in your IDE?
  1. {% block main %}
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  7. <style>
  9. /* これが無いとモーダルウィンドウ表示の際に余白が出る */
  10. *{
  11.   margin: 0;
  12.   padding: 0;
  13. }
  15. /* モーダル全体(背景＋本体) */
  16. .modal{
  17.   display: none;
  18.   position: fixed;
  19.   top: 0;
  20.   height: 100vh;
  21.   width: 100%;
  22. }
  24. /* モーダル背景 */
  25. .modal-bg{
  26.   position: absolute;
  27.   height: 100vh;
  28.   width: 100%;
  29.   background: rgba(0, 0, 0, 0.8);
  30. }
  32. /* モーダル本体 */
  33. .modal-content{
  34.   position: absolute;
  35.   top: 50%;
  36.   left: 50%;
  37.   transform: translate(-50%, -50%);
  38.   overflow: scroll; /* はみ出た部分はスクロールさせる */
  39.   height: 86%;/* これが無いと「overflow:scroll」が利かない */
  40.   width: 96%;/* これが無いと「overflow:scroll」が利かない */
  41.   background: white;
  42.   padding: 14px;
  43. }
  45. /* モーダルウィンドウ表示中に記事本体を固定 */
  46. body.fixed {
  47.   position: fixed;
  48.   width: 100%;
  49.   height: 100%;
  50.   left: 0;
  51. }
  53. .botton5{
  54.   display: inline-block;
  55.   justify-content: space-around;
  56.   background-color:  #fff;
  57.   border: 1px solid #dddddd;
  58.   color:#1c315d;
  59.   width: 230px;
  60.   line-height:20px;
  61.   border-radius:10px;
  62.   text-align:left;
  63.   margin :0px;
  64.   padding :6px;
  66. }
  68. .container10 {
  69.  display: flex;
  70.  flex-wrap: wrap;
  71. }
  74. .item99 {
  75.   margin: 8px;
  76.   padding: 8px;
  77. }
  79. </style>
  81. <div class="botton5">
  82.     <div class="item99">
  83.         <a href="#" class="js-modal-open" data-target="modal01">
  84.             <center><img src="{{ url('homepage') }}/html/user_data/assets/img/userguide/SPOPtitle.png" width="180px"></a></center>
  85.                 <div id="modal01" class="modal js-modal">
  86.                     <div class="modal-bg js-modal-close"></div>
  87.                         <div class="modal-content">
  88.                         <!--<img src="/html/user_data/assets/img/userguide/SPOP2022_.png" height="1280px" >
  89.                             <a href="/html/user_data/assets/img/userguide/SPOP2022_.png" target="_blank"><center><h3>画像で見る</h3></center></a>-->
  90.                             <img src="{{ url('homepage') }}/html/user_data/assets/img/userguide/SPOP_2023_4.1.png" height="1010px" >
  91.                             <a href="{{ url('homepage') }}/html/user_data/assets/img/userguide/SPOP_2023_4.1.png" target="_blank"><center><h3>画像で見る</h3></center></a>
  92.                         <center><a href="#" class="js-modal-close">閉じる</a></center>
  93.                     <br>
  94.                 <br>
  95.             <br>
  96.         </div>
  97.     </div>
  98. </div>
  99.     <a href="https://www.nakatomi-sangyo.com/manual/index.html" target="_self">
  100.         <center><img src="{{ url('homepage') }}/html/user_data/assets/img/userguide/取扱説明書title.png" width="180px"></a></center>
  101.         <br>
  102.         <a href="https://www.nakatomishop.com/user_data/glossaly" target="_self">
  103.         <center><img src="{{ url('homepage') }}/html/user_data/assets/img/userguide/用語集title.png" width="180px" ></a></center>
  104.         <br>
  105.     </div>
  106. <br>
  109. <script>
  110. // モーダルウィンドウを開く
  111. $('.js-modal-open').on('click', function(){
  112.   var target = $(this).data('target');
  113.   var modal = document.getElementById(target);
  114.   scrollPosition = $(window).scrollTop();
  116.   $('body').addClass('fixed').css({'top': -scrollPosition});
  117.   $(modal).fadeIn();
  118.   return false;
  119. });
  121. // モーダルウィンドウを閉じる
  122. $('.js-modal-close').on('click', function(){
  123.   $('body').removeClass('fixed');
  124.   window.scrollTo( 0 , scrollPosition );
  125.   $('.js-modal').fadeOut();
  126.   return false;
  127. });
  128. </script>
  130. {% endblock %}