---
sourceDocument: オーストラリア API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/api-reference

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリア API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# GlideModal - クライアント

# GlideModal - クライアント {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：24分

GlideModal API は、モーダルと呼ばれるコンテンツオーバーレイを表示するためのメソッドを提供します。モーダルは、ページの上に表示され、ユーザーがアクションを実行すると閉じるインタラクティブなウィンドウです。モーダルを使用して、情報を表示したり、質問したり、アクションを実行したりすることができます。

クライアントサイド JavaScript を使用できる場所であればどこでも、スクリプトで GlideModal メソッドを使用します。これらのメソッドは、ほとんどの場合 \[クライアント\] チェックボックスがオンになっている UI アクションから呼び出されます。  
ネクストエクスペリエンス UI の 構成可能ワークスペース でのモーダルオプションと互換性については、以下を参照してください。

* [g_modal (ネクストエクスペリエンス): クライアント](https://servicenow-prod.fluidtopics.net/FVGN7KGKUVvmKUjXDQP0yg#g_modalClientAPINX "g_modal API を使用すると、モーダルウィンドウを表示してアプリケーションの機能を拡張できます。")
* [GlideModal (ネクストエクスペリエンス): クライアント](https://servicenow-prod.fluidtopics.net/KLAeHl6KEdhVdIDQJNg9Wg#GModClientAPINX "GlideModal API は、モーダルと呼ばれるコンテンツオーバーレイを表示するためのメソッドを提供します。モーダルは、ページの上に表示され、ユーザーがアクションを実行すると閉じるインタラクティブなウィンドウです。モーダルを使用して、情報を表示したり、質問したり、アクションを実行したりすることができます。")
{#c_GlideModalV3API__ul_oyf_v1f_1gc}  
図 : 1. モーダルの例  
モーダルには、次のようなさまざまなタイプのコンテンツを含めることができます。

* 静的テキスト
* 動的テキスト
* Forms
* イメージ
* ボタン  
この API を使用すると、次のことができます。

* 既存のモーダルを取得します。
* UI ページまたは渡された HTML からモーダルコンテンツを作成します。
* モーダルでタイトルを設定します。
* モーダルの幅を設定します。
* 設定を取得して設定します。
* モーダルビューを切り替えます。  
モーダルを UI に表示するには、次のいずれかの render メソッドを呼び出す必要があります。

* [GlideModal:レンダリング()](https://servicenow-prod.fluidtopics.net/oiHnD9xzWEzRDmGqj6ENqw#r_GMODV3-render "モーダルで API がインスタンス化されたときに指定された UI ページをレンダリングします。UI に表示するには、モーダルを定義した後にこのメソッドを呼び出す必要があります。")
* [GlideModal - renderWithContent(文字列 html)](https://servicenow-prod.fluidtopics.net/oiHnD9xzWEzRDmGqj6ENqw#r_GMODV3-renderWithContent_S "指定された文字列ベースの HTML コンテンツを含むモーダルを表示します。")
{#c_GlideModalV3API__ul_n2g_g3d_kcc}  
次のコード例は、UI ページの「UI_dialog_name」を使用してモーダルを作成およびレンダリングする方法を示しています。

    var dialog = new GlideModal("UI_dialog_name");

    //Set the dialog title
    dialog.setTitle('Show title');

    //Set the dialog width		      	
    dialog.setWidth(550);

    //Display the modal
    dialog.render();

このコード例は、 renderWithContent() メソッドと HTML を使用してモーダルのコンテンツを定義するモーダルを作成およびレンダリングする方法を示しています。

    function cancelDialog(){

      var dialog = new GlideModal('cancelTask');
      //Sets the dialog title
      dialog.setTitle('Cancel Task');
      //Set up valid custom HTML to display
      dialog.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
        <p><select name="cancellation" id="taskCancellation" class="form-control">
        <option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
        <option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
        </select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())"      class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">Cancel Task</button></div></div>');

      //Use the windows object to ensure the code is accessible from the modal dialog
      window.changeTaskAction = function(thisButton, thisAction){

        //Close the GlideModal dialog window
        dialog.destroy();

        //Submit to the back-end
        if(thisButton=='Cancel Task'){
          if(thisAction=="cancelAll"){
            g_form.setValue('state',4);//Closed Incomplete -- will close the Requested Item and all other open tasks
          }else{
            g_form.setValue('state',7);//Closed Skipped -- will only close this task
          }
             //Regular ServiceNow form submission
             gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
          }
       };
       return false;//Prevents the form from submitting when the dialog first load
    }

注:  
これは、 GlideWindow および GlideDialogWindow API のフル機能の代替品です。

## GlideModal - GlideModal(文字列 id, ブール readOnly, 数値/文字列の幅) {#ariaid-title2}

GlideModal クラスのインスタンスを作成します。
{#r_GMODV3-GlideModal_S_B_N__table_ups_b4s_3v__entry__3}{#r_GMODV3-GlideModal_S_B_N__GMod-GMod-id-entry}{#r_GMODV3-GlideModal_S_B_N__GMod-GMod-readOnly-entry}{#r_GMODV3-GlideModal_S_B_N__GMod-GMod-width-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| ID | 文字列 | モーダルにロードする[UI ページ](https://servicenow-prod.fluidtopics.net/nPvU6Dlx~vXFaAPm7eEiBQ#r_UIPages "UI ページは、フォーム、ダイアログ、リスト、その他の UI コンポーネントの作成と表示に使用できます。") の名前。 ベースシステムで提供されている `glide_modal_confirm` モーダルまたは `glide_modal_info` モーダルを指定することもできます。 テーブル:UI ページ \[sys_ui_page\] |
| readOnly | ブーリアン | オプション。モーダルのコンテンツが読み取り専用かどうかを示すフラグ。 有効な値： * true:コンテンツは読み取り専用です。 * false:ユーザーはコンテンツを変更できます。 {#r_GMODV3-GlideModal_S_B_N__ul_es3_yfv_lfc} デフォルト値：false |
| 幅 | 数値または文字列 | オプション。モーダルの幅 (ピクセル単位) またはモーダル CSS クラス。ピクセル幅が渡されると、指定された幅が対応する CSS クラスに揃えられます。 可能なモーダル CSS クラス: * modal-alert:(300 px) 指定された幅が 0〜349 ピクセルの場合に割り当てられます。 * modal-sm:(400 px) 指定された幅が 350 〜 449 ピクセルの場合に割り当てられます。 * modal-md:(600 px) 指定された幅が 450 〜 649 ピクセルの場合に割り当てられます。 * modal-lg:(900 px) 指定された幅が 650 〜 900 ピクセルの場合に割り当てられます。 {#r_GMODV3-GlideModal_S_B_N__ul_gs3_yfv_lfc} デフォルト:modal-md 最大幅:900 ピクセル 注: setWidth() メソッドを使用してモーダルの幅を設定することもできます。 |
[表 : 1. パラメーター]

{#r_GMODV3-GlideModal_S_B_N__table_ups_b4s_3v}  
次のコード例は、既存の UI ページを使用して GlideModal オブジェクトを作成する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

    //Set the dialog title
    dialog.setTitle('Show title'); 

    //Set the desired preferences
    dialog.setPreference('table', 'task'); 			
    dialog.setPreference('name', 'value');        	

    //Opens the dialog
    dialog.render();

次のコード例は、 `glide_modal_confirm` ファイルを使用して GlideModal オブジェクトを作成する方法を示しています。

    var dialog = new GlideModal('glide_modal_confirm', true, 300);
    dialog.setTitle(new GwtMessage().getMessage('Confirmation'));
    dialog.setPreference('body', new GwtMessage().format("This will complete all update sets in the batch. Continue changing state to complete?"));
    dialog.setPreference('focusTrap', true);
    dialog.setPreference('onPromptComplete', doComplete);
    dialog.setPreference('onPromptCancel', doCancel);
    dialog.render();
    	
    function doComplete() {
      callback(true);
    }
    	
    function doCancel() {
      callback(false);
    }

## GlideModal:destroy() {#ariaid-title3}

現在のモーダルを閉じます。
{#GMODV3-destroy__table_vhs_dpt_bdc__entry__3}

| 名前 | タイプ | 説明 |
|-|-|-|
| なし | なし | なし |
[表 : 2. パラメーター]

{#GMODV3-destroy__table_vhs_dpt_bdc} {#GMODV3-destroy__table_whs_dpt_bdc__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 3. 返される内容]

{#GMODV3-destroy__table_whs_dpt_bdc}  
次のコード例は、 destroy() メソッドを使用してモーダルを閉じる方法を示しています。

    function cancelDialog(){

    var gmod = new GlideModal('cancelTask');
      //Sets the dialog title
      gmod.setTitle('Cancel Task');
      //Set up valid custom HTML to be displayed
      gmod.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p>
        <p><select name="cancellation" id="taskCancellation" class="form-control">
        <option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option>
        <option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option>
        </select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())"      class="btn btn-default">Abort</button><button style="padding:5px"      class="btn btn-primary" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">
        Cancel Task</button></div></div>');

      //Use the windows object to ensure our code is accessible from the modal dialog
      window.changeTaskAction = function(thisButton, thisAction){

        //Close the glide modal dialog window
        gmod.destroy();

        //Submit to the back-end
        if(thisButton=='Cancel Task'){
          if(thisAction=="cancelAll"){
            g_form.setValue('state',4); //Closed Incomplete -- closes the Requested Item and all other open tasks
          }else{
            g_form.setValue('state',7); //Closed Skipped -- only closes this task
          }
          //Regular ServiceNow form submission
          gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
        }
      };
      return false; //Prevents the form from submitting when the dialog first load
    }

次のコード例は、 GlideModal.get().destroy() を使用してクライアントスクリプトでモーダルを閉じる方法を示しています。次のボタンは、UI ページの HTML で宣言`<button onclick="closeMe()">する必要があります。</button>`

    function closeGlideModal() {
      try {
        GlideModal.get().destroy();
      } catch (err) {
        console.warn("closeGlideModal ERROR: " + err.message);
        var x = document.getElementById('THE_NAME_OF_YOUR_UI_PAGE' + '_closemodal');
        if (x) {
          x.click();
        } else {
          console.warn("No 'X' close button found!");
        }
      }
    }

    function closeMe() {
      setTimeout(function() {
        closeGlideModal();
      }, 100);
    }

## GlideModal - get(文字列 id) {#ariaid-title4}

指定された UI ページ名で識別される GlideModal オブジェクトを返します。
このメソッドを使用して、 `GlideModal.get().destroy()` などの他の GlideModal 操作で使用する GlideModal オブジェクトを取得します。
{#r_GMODV3-get_S__table_vwy_xjz_3v__entry__3}{#r_GMODV3-get_S__GMod-get-id-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| ID | 文字列 | モーダルに関連付けられている[UI ページ](https://servicenow-prod.fluidtopics.net/nPvU6Dlx~vXFaAPm7eEiBQ#r_UIPages "UI ページは、フォーム、ダイアログ、リスト、その他の UI コンポーネントの作成と表示に使用できます。") の名前。 ベースシステムで提供されている `glide_modal_confirm` モーダルまたは `glide_modal_info` モーダルを指定することもできます。 テーブル:UI ページ \[sys_ui_page\] |
[表 : 4. パラメーター]

{#r_GMODV3-get_S__table_vwy_xjz_3v} {#r_GMODV3-get_S__table_wwy_xjz_3v__entry__2}{#r_GMODV3-get_S__GMod-get-return-entry}

| タイプ | 説明 |
|-|-|
| GlideModal | 要求された GlideModal オブジェクト。 |
[表 : 5. 返される内容]

{#r_GMODV3-get_S__table_wwy_xjz_3v}  
この例では、 get() メソッドを使用して、 destroy() メソッドを使用して閉じるモーダルを取得する方法を示します。

    // If the modal was initially created like this:

    var dialog = new GlideModal("glide_modal_confirm"); 
    dialog.render();

    // Code using the modal
    ...

    // Now use the get() and destroy() methods to close the modal
    var glideModal = new GlideModal().get("glide_modal_confirm");
    glideModal.destroy();

    // You can also code it like this:
    // GlideModal.prototype.get('glide_modal_confirm').destroy();

## GlideModal - getPreference(文字列名) {#ariaid-title5}

指定された preference (プロパティ) の値を返します。
モーダルを作成するアクションを呼び出すと、通常、 [GlideModal - setPreference(文字列名, 文字列値)](https://servicenow-prod.fluidtopics.net/oiHnD9xzWEzRDmGqj6ENqw#r_GMODV3-setPreference_S_S "現在のフォームの指定されたフィールドを指定された値に設定します。") メソッドを使用してモーダルに必要な設定も作成されます。 UI ページのクライアントスクリプトは このメソッドを使用してこれらの設定を使用できます。
{#r_GMODV3-getPreference_S__table_r2h_mrs_3v__entry__3}{#r_GMODV3-getPreference_S__GMod-getPreference-name-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| 名前 | 文字列 | 取得する設定値の名前。この値は、 setPreference() メソッドを使用してモーダルで事前に設定されている必要があります。 |
[表 : 6. パラメーター]

{#r_GMODV3-getPreference_S__table_r2h_mrs_3v} {#r_GMODV3-getPreference_S__table_s2h_mrs_3v__entry__2}{#r_GMODV3-getPreference_S__GMod-getPreference-return-entry}

| タイプ | 説明 |
|-|-|
| 文字列 | 指定された設定の値。 |
[表 : 7. 返される内容]

{#r_GMODV3-getPreference_S__table_s2h_mrs_3v}  
この例は 設定を設定し、指定されたモーダルからその設定を取得する簡単なケースを示しています。

    var dialog = new GlideModal('UI_dialog_name');
    //Sets the dialog title
    dialog.setTitle('Modal title');

    //Sets the value of the preference table
    dialog.setPreference('table', 'incident');

    //Gets the value of the preference table
    var title = dialog.getPreference('table');

## GlideModal:レンダリング() {#ariaid-title6}

モーダルで API がインスタンス化されたときに指定された UI ページをレンダリングします。UI に表示するには、モーダルを定義した後にこのメソッドを呼び出す必要があります。
UI ページを使用してモーダルのコンテンツを生成する場合は、このメソッドを呼び出します。モーダル内に HTML を表示する場合は、 [GlideModal - renderWithContent(文字列 html)](https://servicenow-prod.fluidtopics.net/oiHnD9xzWEzRDmGqj6ENqw#r_GMODV3-renderWithContent_S "指定された文字列ベースの HTML コンテンツを含むモーダルを表示します。") を呼び出してモーダルをレンダリングします。
{#r_GMODV3-render__table_zky_hpy_3v__entry__3}

| 名前 | タイプ | 説明 |
|-|-|-|
| なし |   |   |
[表 : 8. パラメーター]

{#r_GMODV3-render__table_zky_hpy_3v} {#r_GMODV3-render__table_aly_hpy_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 9. 返される内容]

{#r_GMODV3-render__table_aly_hpy_3v}  
次のコード例は、UI ページ「UI_dialog_name」を使用して GlideModal オブジェクトをインスタンス化し、モーダルのタイトルと幅を設定してから、UI (レンダリング) にモーダルを表示する方法を示しています。

    var dialog = new GlideModal("UI_dialog_name");

    //Set the dialog title and width
    dialog.setTitle('Show title');		      	
    dialog.setWidth(550);

    //Display the dialog
    dialog.render();

## GlideModal - renderWithContent(文字列 html) {#ariaid-title7}

指定された文字列ベースの HTML コンテンツを含むモーダルを表示します。
HTML からモーダルコンテンツを派生させるときは、render() メソッドの代わりに renderWithContent() メソッドを使用します。
{#r_GMODV3-renderWithContent_S__table_xss_3hz_3v__entry__3}{#r_GMODV3-renderWithContent_S__GMod-renderWithContent_S-html-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| html | 文字列 | モーダルに表示する HTML コンテンツ。 |
[表 : 10. パラメーター]

{#r_GMODV3-renderWithContent_S__table_xss_3hz_3v} {#r_GMODV3-renderWithContent_S__table_yss_3hz_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 11. 返される内容]

{#r_GMODV3-renderWithContent_S__table_yss_3hz_3v}  
このコード例は、ユーザーが選択できる選択肢のリストを含む、渡された HTML 文字列を使用して構築されたモーダルを表示する方法を示しています。

    function cancelDialog(){

      var dialog = new GlideModal('cancelTask');

      // Sets the dialog title
      dialog.setTitle('Cancel Task');

      // Set up valid custom HTML to display
      dialog.renderWithContent('<div style="padding:15px">
        <p>What action do you want to take?</p>
        <p><select name="cancellation" id="taskCancellation" class="form-control">
        <option value="cancelOnly" role="option">Cancel task but keep requested item open
        </option>
        <option value="cancelAll" role="option">Cancel this and all other tasks, closing the
        requested item</option></select></p><div style="padding:5px;float:right"><button      style="padding:5px;margin-right:10px onclick="window.changeTaskAction(this.innerHTML,     jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button>
        <button style="padding:5px" class="btn btn-primary"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">
        Cancel Task</button></div></div>');

      // Use the windows object to ensure the code is accessible from the modal dialog
      window.changeTaskAction = function(thisButton, thisAction){

        // Close the GlideModal dialog window
        dialog.destroy();

        // Submit to the back-end
        if(thisButton=='Cancel Task'){
          if(thisAction=="cancelAll"){
            // Closed Incomplete -- will close the Requested Item and all other open tasks
            g_form.setValue('state',4);
          }else{
            // Closed Skipped -- will only close this task
            g_form.setValue('state',7);
          }
             //Regular ServiceNow form submission
             gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
          }
       };

       // Prevents the form from submitting when the dialog first loads
       return false;
    }

## GlideModal - setPreference(文字列名, 文字列値) {#ariaid-title8}

現在のフォームの指定されたフィールドを指定された値に設定します。
{#r_GMODV3-setPreference_S_S__table_cvd_zqs_3v__entry__3}{#r_GMODV3-setPreference_S_S__GMod-setPreference-name-entry}{#r_GMODV3-setPreference_S_S__GMod-setPreference-value-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| 名前 | 文字列 | 更新するフォームフィールドの名前。 このフィールドが現在のフォームに存在しない場合、要求は無視されます。 |
| value | 文字列 | 指定されたフォームフィールドに格納する値。 |
[表 : 12. パラメーター]

{#r_GMODV3-setPreference_S_S__table_cvd_zqs_3v} {#r_GMODV3-setPreference_S_S__table_dvd_zqs_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 13. 返される内容]

{#r_GMODV3-setPreference_S_S__table_dvd_zqs_3v}  
次のコード例は、 table 設定を「task」に設定し、 name 設定を「value」に設定する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

    //Set the dialog title
    dialog.setTitle('Show title'); 

    //Set the desired preferences
    dialog.setPreference('table', 'task'); 			
    dialog.setPreference('name', 'value');        	

    //Opens the dialog
    dialog.render();

## GlideModal:setPreferenceAndReload(オブジェクトプロパティ) {#ariaid-title9}

指定された設定を行い、モーダルを再ロードします。
{#r_GMODV3-setPrefAndReload_A__table_u3v_jqy_3v__entry__3}{#r_GMODV3-setPrefAndReload_A__GMod-setPreferenceAndReload-properties-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| プロパティ | オブジェクト | 形式の設定として設定する名前と値のペア。 |
[表 : 14. パラメーター]

{#r_GMODV3-setPrefAndReload_A__table_u3v_jqy_3v} {#r_GMODV3-setPrefAndReload_A__table_v3v_jqy_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 15. 返される内容]

{#r_GMODV3-setPrefAndReload_A__table_v3v_jqy_3v}  
この例では、 setPreferenceAndReload() 関数が設定を行い、更新された設定でモーダルを再ロードします。モーダルは初期設定でレンダリングされ、5 秒後に setPreferenceAndReload() が呼び出され、更新された設定でモーダルが再ロードされます。

     // UI Page to render in the GlideModal is 'glide_modal_confirm'
     var glideModal = new GlideModal("glide_modal_confirm", false, 600);
     glideModal.setTitle(getMessage("Confirmation"));
     glideModal.setPreference("body", getMessage("Are you sure you want to reject this deal registration? This action cannot be undone."));
     glideModal.setPreference('buttonLabelComplete', getMessage("Reject"));
     glideModal.setPreference('buttonLabelCancel', getMessage("Cancel"));
     glideModal.render();

     var preferences = {
         "body": "THIS IS THE UPDATED BODY PREFERENCE",
         "buttonLabelComplete": "NEW REJECT",
         "buttonLabelCancel": "NEW CANCEL"
     };

     setTimeout(function() {
         glideModal.setPreferenceAndReload(preferences);
     }, 5000);

## GlideModal - setTitle(文字列タイトル) {#ariaid-title10}

モーダルのタイトルを設定します。
{#r_GMODV3-setTitle_S__table_kxd_l5s_3v__entry__3}{#r_GMODV3-setTitle_S__GMod-setTitle-title-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| タイトル | 文字列 | モーダルのタイトルに表示するテキスト。 |
[表 : 16. パラメーター]

{#r_GMODV3-setTitle_S__table_kxd_l5s_3v} {#r_GMODV3-setTitle_S__table_lxd_l5s_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 17. 返される内容]

{#r_GMODV3-setTitle_S__table_lxd_l5s_3v}  
次のコード例は、モーダルタイトルを <kbd class="ph userinput">[更新するテーブル]</kbd> に設定する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

    //Sets the dialog title
    dialog.setTitle('Table to update'); 
    dialog.setPreference('table', 'task'); 			      	
    dialog.setWidth(550);

    //Opens the dialog
    dialog.render();

## GlideModal - setWidth(数値/文字列の幅) {#ariaid-title11}

モーダルの幅 を設定します。
[GlideModal - GlideModal(文字列 id, ブール readOnly, 数値/文字列の幅)](https://servicenow-prod.fluidtopics.net/oiHnD9xzWEzRDmGqj6ENqw#r_GMODV3-GlideModal_S_B_N "GlideModal クラスのインスタンスを作成します。") メソッドを使用して初めて API をインスタンス化するときに、モーダルの幅を設定することもできます。
{#r_GMODV3-setWidth_N__table_msx_wts_3v__entry__3}{#r_GMODV3-setWidth_N__GMod-setWidth-width-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| 幅 | 数値または文字列 | モーダルの幅 (ピクセル単位) またはモーダル CSS クラス。ピクセル幅が渡されると、指定された幅が対応する CSS クラスに揃えられます。 可能なモーダル CSS クラス: * modal-alert:(300 px) 指定された幅が 0〜349 ピクセルの場合に割り当てられます。 * modal-sm:(400 px) 指定された幅が 350 〜 449 ピクセルの場合に割り当てられます。 * modal-md:(600 px) 指定された幅が 450 〜 649 ピクセルの場合に割り当てられます。 * modal-lg:(900 px) 指定された幅が 650 〜 900 ピクセルの場合に割り当てられます。 {#r_GMODV3-setWidth_N__ul_omg_1fc_mcc} 最大幅:900 ピクセル |
[表 : 18. パラメーター]

{#r_GMODV3-setWidth_N__table_msx_wts_3v} {#r_GMODV3-setWidth_N__table_nsx_wts_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 19. 返される内容]

{#r_GMODV3-setWidth_N__table_nsx_wts_3v}  
次のコード例は、モーダルの幅を 550 ピクセルに設定する方法を示しています。

    var dialog = new GlideModal('UI_dialog_name');

    //Sets the dialog title
    dialog.setTitle('Show title'); 
    dialog.setPreference('name', 'value'); 			      	
    dialog.setWidth(550);

    //Opens the dialog
    dialog.render();

## GlideModal - switchView(文字列 newView) {#ariaid-title12}

ビューを変更し、モーダルを再ロードします。
{#r_GMODV3-switchView_S__table_ovv_5py_3v__entry__3}{#r_GMODV3-switchView_S__GMod-switchView-newView-entry}

| 名前 | タイプ | 説明 |
|-|-|-|
| 新規ビュー | 文字列 | 使用するビュー。 |
[表 : 20. パラメーター]

{#r_GMODV3-switchView_S__table_ovv_5py_3v} {#r_GMODV3-switchView_S__table_pvv_5py_3v__entry__2}

| タイプ | 説明 |
|-|-|
| なし | なし |
[表 : 21. 返される内容]

{#r_GMODV3-switchView_S__table_pvv_5py_3v}

## GlideModal - updateTitle( {#ariaid-title13}

GlideModal setTitle() メソッドを使用して指定されたタイトルを更新します。
変更をコミットするには、常に最初に [GlideModal - setTitle(文字列タイトル)](https://servicenow-prod.fluidtopics.net/oiHnD9xzWEzRDmGqj6ENqw#r_GMODV3-setTitle_S "モーダルのタイトルを設定します。") を呼び出し、 updateTitle() を使用してモーダルタイトルを指定する必要があります。
{#GMODV3-updateTitle__table_hp5_ncp_sfc__entry__3}

| 名前 | タイプ | 説明 |
|-|-|-|
| なし |   |   |
[表 : 22. パラメーター]

{#GMODV3-updateTitle__table_hp5_ncp_sfc} {#GMODV3-updateTitle__table_ip5_ncp_sfc__entry__2}

| タイプ | 説明 |
|-|-|
| なし |   |
[表 : 23. 返される内容]

{#GMODV3-updateTitle__table_ip5_ncp_sfc}  
次の例は、 setTitle() と updateTitle() をそれぞれ呼び出して、モーダルのタイトルを設定および更新する方法を示しています。

    var modal = new nowapi.GlideModal();
    modal.renderWithContent('TEST CONTENT');

    setTimeout(function() {
        modal.setTitle("TEST setTitle() AND updateTitle() METHODS"); 
        // Only updates the 'title' prop, updateTitle() must be called to see change

        modal.updateTitle();
    }, 3000);