モーダルウインドウの中身を切り替えるとfadeInの処理が複数回動作してしまう

不具合の内容

ページ内にモーダルウインドウを設置しました。
.modal_openのクラスがついたリンクをクリックするとモーダルを表示し、さらに.modal_switchがついたリンクをクリックするとモーダルの中身を切り替えるというものなのですが、モーダルの中身を切り替えた際に切り替わったコンテンツが点滅することがあります。
（フェードインが何回も動作しているようです…）

色々触ってみたところ.modal_openでモーダルを開いた後に.modal_switchで現在表示されているファイルと同じファイルを読み込むと発生している感じがします。

原因と解決方法がわかる方がいらっしゃいましたら知恵を貸していただけないでしょうか。
手探り状態で綺麗な書きかたではないと思いますが使用しているコードを下記に載せておきます。
どうぞ宜しくお願いします。

該当のソースコード

$(function(){
   
  $('.modal_open').click(function(){
		
    $('.modal_box').fadeOut();
    $('.modal_bg, .modal_overlay').fadeOut('slow',function(){
        $('.modal_bg, .modal_overlay').remove();
    });
		
    // body内に追加
    $('body').append('<div class="modal_bg"></div>, <div class="modal_overlay"></div>');
    $('.modal_bg, .modal_overlay').fadeIn();

    // data-targetの内容をIDにしてmodalに代入
    var modal = '#' + $(this).attr('data-target');
 
    // モーダルをウィンドウの配置
    function modalResize(){
        var w = $(window).width();
        var h = $(window).height();
 
				var x = 0;
        var y = (h - $(modal).outerHeight(true)) / 2;
 
        $(modal).css({'left': x + 'px','top': y + 'px'});
    }
 
    // modalResizeを実行
    modalResize();
 
    // modalをフェードインで表示
    $(modal).fadeIn();
 
    // クリックしたらフェードアウトさせる
    $('.modal_bg, .modal_close, .modal_overlay').off().click(function(){
        $('.modal_box').fadeOut();
        $('.modal_bg, .modal_overlay').fadeOut('slow',function(){
            $('.modal_bg, .modal_overlay').remove();
        });
    });
 
    // ウィンドウがリサイズされたらモーダルの位置を再計算する
    $(window).on('resize', function(){
        modalResize();
    });
 
    // .modal_switchを押すとモーダルを切り替える
    $('.modal_switch').click(function(){
 
      // 押された.modal_switchの親要素の.modal_boxをフェードアウトさせる
      $('.modal_box').fadeOut();
 
      // 押された.modal_switchのdata-targetの内容をIDにしてmodalに代入
      var modal = '#' + $(this).attr('data-target');
 
      // モーダルをウィンドウの配置
      function modalResize(){
          var w = $(window).width();
          var h = $(window).height();
 
					var x = 0;
          var y = (h - $(modal).outerHeight(true)) / 2;
 
          $(modal).css({'left': x + 'px','top': y + 'px'});
      }
 
      // modalResizeを実行
      modalResize();
			
      $(modal).fadeIn();
 
      // ウィンドウがリサイズされたらモーダルの位置を再計算する
      $(window).on('resize', function(){
          modalResize();
      });
			
    });
  });
});

  <header>
    <h1><a href="/"><img src="img/common/header_logo.svg" alt=""></a></h1>
    <span class="menu-control-open fl" id="menuControlOpen">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </span>
    <div class="menu">
      <div class="menu-inner">
        <span class="menu-control-close" id="menuControlClose">
          <span></span>
        </span>
        
        <nav>
          <p class="navtitle">LIST</p>
          <ul>
            <li><a data-target="modal02a" class="modal_open">02-A</a></li>
            <li><a data-target="modal02b" class="modal_open">02-B</a></li>
            <li><a data-target="modal02c" class="modal_open">02-C</a></li>
          </ul>
        </nav>
 
      </div>
    </div>
  </header>
  
  <div class="contents">
    <section id="map">
      <img src="img/index/map.svg" alt="MAP">
      
      <a class="js-modal-open balloon b01" href="" data-target="modal01">リンク01</a>
      <a class="js-modal-open balloon b02" href="" data-target="modal02">リンク02</a>
      
    </section><!-- map -->
    
    
    <div id="modal01" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content b-content">
            <h2 class="block-name">
              <span class="number">Block.02</span>
              LIST
            </h2>
            <h3 class="cate-name">カテゴリー1</h3>
            <ul class="racklist">
              <li><a data-target="modal02a" class="modal_open">02-A</a></li>
              <li><a data-target="modal02b" class="modal_open">02-B</a></li>
              <li><a data-target="modal02c" class="modal_open">02-C</a></li>
            </ul>
            <a class="js-modal-close" href=""><span></span></a>
        </div><!--modal__inner-->
    </div><!--modal-->
    <div id="modal02" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content b-content">
            <h2 class="block-name">
              <span class="number">Block.03</span>
              LIST
            </h2>
            <h3 class="cate-name">〇〇〇</h3>
            <ul class="racklist">
              <li><a href="#">XX-X</a></li>
              <li><a href="#">XX-X</a></li>
              <li><a href="#">XX-X</a></li>
              <li><a href="#">XX-X</a></li>
              <li><a href="#">XX-X</a></li>
            </ul>
            <a class="js-modal-close" href=""><span></span></a>
        </div><!--modal__inner-->
    </div><!--modal-->

  </div><!-- contents -->

<!-- rack02a -->
<div id="modal02a" class="modal_box fl">
  <div class="wrap fl">

    <div class="rack-contents">
      <?php include('rack/02a.php'); ?>
      <div id="rack_footer" class="fl"><?php include('rack/rack_footer.php'); ?></div><!-- rack_footer -->
    </div>
    
    <div class="item-contents">
      <div class="list-display"></div>
    </div>
    
  </div>
  <p><a class="modal_close"><span></span></a></p>
</div>
 
<!-- rack02b -->
<div id="modal02b" class="modal_box">
  <div class="rack-contents">
  <?php include('rack/02b.php'); ?>
  <div id="rack_footer" class="fl"><?php include('rack/rack_footer.php'); ?></div><!-- rack_footer -->
  </div>
  <p><a class="modal_close"><span></span></a></p>
</div>
 
<!-- rack02c -->
<div id="modal02c" class="modal_box">
  <div class="rack-contents">
  <?php include('rack/02c.php'); ?>
  <div id="rack_footer" class="fl"><?php include('rack/rack_footer.php'); ?></div><!-- rack_footer -->
  </div>
  <p><a class="modal_close"><span></span></a></p>
</div>