CSS

    /** モーダルを作成**/
    .modal {
	display: none;
	position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
	}
    .modal_bg {
	background-color:rgba(30,51,77,0.9);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
    }
    .modal_container {
        background-image: url('{{asset('/home/images/bg2.png')}}');
        background-repeat: repeat-y;
        position: absolute;
        width: 1200px;
        top: 10%;
    }

.modal_containerが重要

    .modal_bg {
	background-color:rgba(30,51,77,0.9);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
    }
    .modal_container {
        background-image: url('{{asset('./images/bg2.png')}}');
        background-repeat: repeat-y;
        position: absolute;
        width: 1200px;
        top: 10%;
    }

HTML

<div class="btn_more_quest js_modal_quest_open"><a href="#">もっと見る</a></div>


<div class="modal js_modal_quest">
  <div class="modal_bg js_modal_close"></div>
      <div class="modal_container">
        <div class="bg-inner">
          <h4>進行中のクエスト<div class="btn_more_quest js_modal_close"><a href="#">閉じる</a></div></h4>
          <div class="wide_table_container">
            <table class="wide_table">
              <tr><th width="27%">クエスト名</th><th width="13%">勇者</th><th width="10%">攻略状況</th><th>未踏</th><th style="text-align: right;"><div class="label_bar_container"><div class="label_bar_gross_profit"></div> 予想粗利 <div class="label_bar_sales"></div> 売上</div></th></tr>
              <tr><td>にゃんにゃんランド</td><td>優さん</td><td>3500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 50%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr>
              <tr><td>わんわんランド</td><td>鈴木</td><td>2500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 75%"></div><div class="bar_sales" style="max-width: 10%"></div></td></tr>
              <tr><td>魔界</td><td>田中</td><td>2000万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 30%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr>
            </table>
          </div>
        </div>
      </div>
  </div>
</div>

jQuery

<script type="text/javascript">

    // モーダルの制御関数定義
    var modalContainer; // モーダルのコンテナ
    var modalContents;  // モーダルコンテンツ

    var appearModal = function (modalContainer, modalContents) {
        $(function (){
            $(modalContainer).on('click',function() {
                $(modalContents).fadeIn();
                pos = $(window).scrollTop();
                $('body').css('overflow', 'hidden');
                return false;
            });
            $('.js_modal_close').on('click',function() {
                $(modalContents).fadeOut();
                $('body').css('overflow', '');
                $('body').prop({scrollTop: pos});
                return false;
            });
        });
    }
    // モーダルの制御関数定義 ここまで

    // ブラウザの幅を取得してモーダルの横に中央配置にする関数定義
    checkWidth = function() {
        // ブラウザの幅を取得
        var browserWidth = $(window).width();
        var modalWidth = $(".modal_container").width();
        var plusPxW = ((browserWidth - modalWidth) / 2);

        $('.modal_container').css({'left': plusPxW + "px"});
    }
    // ブラウザの幅を取得してモーダルの横に中央配置にする関数定義 ここまで


  $(  function() {
        // モーダル実行
        appearModal('.js_modal_quest_open', '.js_modal_quest');

        // モーダル表示時に中央配置を実行
        checkWidth();
        $(window).resize(checkWidth);
    });
</script>
<!-- モーダル End-->

ここポイント

var plusPxW = ((browserWidth - modalWidth) / 2);

(全体のブラウザサイズから – モーダルの幅) / 2 = モーダルのmargin-leftの値にすることで、動的中央配置が実現される🐱✨

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ！🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします＞＜