アラートのメッセージを閉じる

a-blog cmsでは、管理画面で使用されているアラート（.acms-alert）を閉じる機能が実装されています。（Ver. 2.0.0より）

デモ

<div class="acms-alert acms-alert-icon">
  <button 
    type="button"
    class="js-acms-alert-close acms-alert-icon-after"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
  acms-alert
</div>
<div class="acms-alert acms-alert-info acms-alert-icon">
  <button 
    type="button"
    class="js-acms-alert-close acms-alert-icon-after"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
  .acms-alert-info
</div>
<div class="acms-alert acms-alert-danger acms-alert-icon">
  <button 
    type="button"
    class="js-acms-alert-close acms-alert-icon-after"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
  .acms-alert-danger
</div>

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

  //------------------
  // acms alert close
  acmsAlertCloseMark: '.js-acms-alert-close',
  acmsAlertCloseConfig: {
    target: '.acms-admin-alert, .acms-alert'
  },
  acmsAlertCloseArray: [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
  ],

---

---

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsAlertCloseMark = '.js-sample-alert-closed';
  ACMS.Config.acmsAlertCloseConfig = {
    target  : '.js-sample-alert'
  };
  ACMS.Config.acmsAlertCloseArray = [
  //    {
  //        'mark'    : '',
  //        'config'  : {}
  //    }
  ],
});

acmsAlertCloseArrayでは配列を渡せるようになっており、複数の設定を指定したいときに使います。
configにはacmsAlertCloseConfigの設定を指定できます。

class属性を.js-close-alertにし、targetの項目を追加する場合には以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsAlertCloseArray.push({
    mark: '.js-close-alert',
    config: {
      target: 'js-alert'
    }
  });
});

---