[{"data":1,"prerenderedAt":2719},["ShallowReactive",2],{"content-doc:article:/articles/bootstrap5-nested-model":3,"content-surroundings:article:/articles/bootstrap5-nested-model":2708},{"id":4,"title":5,"body":6,"date":2692,"description":2693,"extension":2694,"kind":2695,"meta":2696,"navigation":190,"ogImage":2697,"path":2698,"seo":2699,"sitemap":2700,"stem":2704,"tags":2705,"updatedAt":2692,"__hash__":2707},"article/articles/bootstrap5-nested-model.md","Bootstrap5で入れ子モーダルを実現する",{"type":7,"value":8,"toc":2685},"minimark",[9,18,21,30,34,37,105,112,232,239,242,245,252,258,271,274,287,290,1196,1198,2472,2480,2605,2608,2623,2626,2657,2661,2664,2667,2672,2676,2681],[10,11,12,13,17],"p",{},"ウェブアプリにおいて、ユーザーからの操作や情報入力を段階的に進めるために、複数のモーダルを重ねて表示したいケースがしばしば存在する。\nしかし ",[14,15,16],"code",{},"Bootstrap5"," では標準のモーダル機能として入れ子モーダルをサポートしていない。",[10,19,20],{},"公式でもUXの関係でサポートしていないと明示されており、モーダルから別のモーダルを呼び出すことは可能だが、元のモーダルは消えてしまう。",[10,22,23],{},[24,25,29],"a",{"href":26,"rel":27},"https://getbootstrap.jp/docs/5.3/components/modal/#toggle-between-modals",[28],"nofollow","Toggle between modals",[31,32,33],"h2",{"id":33},"なぜ消えるか",[10,35,36],{},"通常、Bootstrap5のモーダルはdata属性を用いて展開する。",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-html shiki shiki-themes github-light","\u003Cbutton class=\"btn btn-primary\" data-bs-target=\"#modalA\" data-bs-toggle=\"modal\">\n  Open second modal\n\u003C/button>\n","html","",[14,45,46,89,95],{"__ignoreMap":43},[47,48,51,55,59,63,66,70,73,75,78,81,83,86],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sgsFI","\u003C",[47,56,58],{"class":57},"shJU0","button",[47,60,62],{"class":61},"s7eDp"," class",[47,64,65],{"class":53},"=",[47,67,69],{"class":68},"sYBdl","\"btn btn-primary\"",[47,71,72],{"class":61}," data-bs-target",[47,74,65],{"class":53},[47,76,77],{"class":68},"\"#modalA\"",[47,79,80],{"class":61}," data-bs-toggle",[47,82,65],{"class":53},[47,84,85],{"class":68},"\"modal\"",[47,87,88],{"class":53},">\n",[47,90,92],{"class":49,"line":91},2,[47,93,94],{"class":53},"  Open second modal\n",[47,96,98,101,103],{"class":49,"line":97},3,[47,99,100],{"class":53},"\u003C/",[47,102,58],{"class":57},[47,104,88],{"class":53},[10,106,107,108,111],{},"このとき、",[14,109,110],{},"bootstrap.js"," で呼ばれる処理の中に、すでに開いているモーダルがある場合は閉じる処理が入っているため、展開中のものは閉じられてしまう。",[38,113,117],{"className":114,"code":115,"language":116,"meta":43,"style":43},"language-js shiki shiki-themes github-light","// avoid conflict when clicking modal toggler while another one is open\nconst alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)\nif (alreadyOpen) {\n  Modal.getInstance(alreadyOpen).hide()\n}\n\nconst data = Modal.getOrCreateInstance(target)\n\ndata.toggle(this)\n","js",[14,118,119,125,153,161,179,185,192,211,216],{"__ignoreMap":43},[47,120,121],{"class":49,"line":50},[47,122,124],{"class":123},"sAwPA","// avoid conflict when clicking modal toggler while another one is open\n",[47,126,127,131,135,138,141,144,147,150],{"class":49,"line":91},[47,128,130],{"class":129},"sD7c4","const",[47,132,134],{"class":133},"sYu0t"," alreadyOpen",[47,136,137],{"class":129}," =",[47,139,140],{"class":53}," SelectorEngine.",[47,142,143],{"class":61},"findOne",[47,145,146],{"class":53},"(",[47,148,149],{"class":133},"OPEN_SELECTOR",[47,151,152],{"class":53},")\n",[47,154,155,158],{"class":49,"line":97},[47,156,157],{"class":129},"if",[47,159,160],{"class":53}," (alreadyOpen) {\n",[47,162,164,167,170,173,176],{"class":49,"line":163},4,[47,165,166],{"class":53},"  Modal.",[47,168,169],{"class":61},"getInstance",[47,171,172],{"class":53},"(alreadyOpen).",[47,174,175],{"class":61},"hide",[47,177,178],{"class":53},"()\n",[47,180,182],{"class":49,"line":181},5,[47,183,184],{"class":53},"}\n",[47,186,188],{"class":49,"line":187},6,[47,189,191],{"emptyLinePlaceholder":190},true,"\n",[47,193,195,197,200,202,205,208],{"class":49,"line":194},7,[47,196,130],{"class":129},[47,198,199],{"class":133}," data",[47,201,137],{"class":129},[47,203,204],{"class":53}," Modal.",[47,206,207],{"class":61},"getOrCreateInstance",[47,209,210],{"class":53},"(target)\n",[47,212,214],{"class":49,"line":213},8,[47,215,191],{"emptyLinePlaceholder":190},[47,217,219,222,225,227,230],{"class":49,"line":218},9,[47,220,221],{"class":53},"data.",[47,223,224],{"class":61},"toggle",[47,226,146],{"class":53},[47,228,229],{"class":133},"this",[47,231,152],{"class":53},[10,233,234],{},[24,235,238],{"href":236,"rel":237},"https://github.com/twbs/bootstrap/blob/86ffedb026636b803c7dd21cc0b804f37e7201cb/js/src/modal.js#L359",[28],"js/src/modal.js",[10,240,241],{},"そのため、data属性を用いたモーダル展開を使うことはできない。",[31,243,244],{"id":244},"解決策",[10,246,247,248,251],{},"代わりにモーダルインスタンスの ",[14,249,250],{},"show()"," メソッドを使う。",[10,253,254],{},[24,255,238],{"href":256,"rel":257},"https://github.com/twbs/bootstrap/blob/86ffedb026636b803c7dd21cc0b804f37e7201cb/js/src/modal.js#L98",[28],[10,259,260,262,263,266,267,270],{},[14,261,250],{}," には上述の処理は含まれてないため複数のモーダルを同時に表示できる。\nあとはモーダルと背景となる ",[14,264,265],{},"backdrop"," の ",[14,268,269],{},"z-index"," を調整してうまく層を作ればいい。",[31,272,273],{"id":273},"サンプル",[10,275,276,277,280,281,283,284,286],{},"以下は ",[14,278,279],{},"jQuery"," でモーダルの表示トリガーを監視し、モーダルの ",[14,282,269],{}," と ",[14,285,265],{}," を管理することで入れ子モーダルを実装している。",[288,289,116],"h4",{"id":116},[38,291,293],{"className":114,"code":292,"language":116,"meta":43,"style":43},"$(function () {\n  $(document).on('click', '.show-modal', function () {\n    const nextId = $(this).data('show-modal')\n    if (nextId) showModal(nextId)\n  })\n\n  function showModal(modalId) {\n    const newModal = $('#' + modalId)\n    const modalInstance = new bootstrap.Modal(newModal[0])\n    modalInstance.show()\n\n    _setupModalZIndex(newModal)\n    _setupBackdrop(modalId)\n    _cleanupModal(newModal, modalId)\n  }\n\n  /**\n   * モーダルのz-indexを設定する\n   * z-index = 1040 + 10 * 表示中のモーダル数（Bootstrap標準の重なり順に準拠）\n   * ex: 1段目: 1040, 2段目: 1050, 3段目: 1060, ...\n   */\n  function _setupModalZIndex(modal) {\n    modal.one('shown.bs.modal', function () {\n      const modalCount = $('.modal.show').length\n      const zIndex = 1040 + 10 * modalCount\n      modal.css('z-index', zIndex)\n      modal.data('zIndex', zIndex) // backdropで使うために保存しておく\n    })\n  }\n\n  /**\n   * モーダルbackdropのz-indexを調整する\n   * ex: 1段目: 1039, 2段目: 1049, 3段目: 1059, ...\n   */\n  function _setupBackdrop(modalId) {\n    // z-index の設定は shown.bs.modal の後でないと正しい数にならない\n    $('#' + modalId).one('shown.bs.modal', function () {\n      const modal = $(this)\n      const zIndex = modal.data('zIndex')\n\n      const backdrop = $('.modal-backdrop').not('.modal-stack').last()\n\n      backdrop\n        .css('z-index', zIndex - 1) // モーダルより1つ下に配置\n        .addClass('modal-stack')\n        .attr('data-backdrop-for', modalId) // 削除処理のためにモーダルIDで関連付け\n    })\n  }\n\n  /**\n   * モーダルが閉じられたとき（hidden.bs.modal）に、対応するbackdropを削除し、\n   * フォーカスを親モーダルかbodyへ逃がす\n   */\n  function _cleanupModal(modal, modalId) {\n    modal.one('hidden.bs.modal', () => {\n      $(`.modal-backdrop[data-backdrop-for=\"${modalId}\"]`).remove()\n\n      const openModals = $('.modal.show')\n      if (openModals.length > 0) {\n        // 親モーダルにフォーカスを当てる\n        const lastModal = openModals.last()\n        const focusTarget = lastModal\n          .find('[autofocus], .btn-close, .btn, input, select')\n          .first()\n        if (focusTarget.length) focusTarget.trigger('focus')\n      } else {\n        // 最後のモーダルを閉じた場合、bodyにフォーカスを逃がす（アクセシビリティ対策）\n        $(document.activeElement).trigger('blur')\n        $('body').trigger('focus')\n      }\n    })\n  }\n})\n",[14,294,295,308,336,366,380,385,389,406,428,455,466,471,480,489,498,504,509,515,521,527,533,539,554,574,597,621,638,656,662,667,672,677,683,689,694,708,714,741,759,779,784,818,823,829,856,871,890,895,900,905,910,916,922,927,945,966,989,994,1012,1032,1038,1056,1069,1085,1095,1119,1130,1136,1154,1174,1180,1185,1190],{"__ignoreMap":43},[47,296,297,300,302,305],{"class":49,"line":50},[47,298,299],{"class":61},"$",[47,301,146],{"class":53},[47,303,304],{"class":129},"function",[47,306,307],{"class":53}," () {\n",[47,309,310,313,316,319,321,324,327,330,332,334],{"class":49,"line":91},[47,311,312],{"class":61},"  $",[47,314,315],{"class":53},"(document).",[47,317,318],{"class":61},"on",[47,320,146],{"class":53},[47,322,323],{"class":68},"'click'",[47,325,326],{"class":53},", ",[47,328,329],{"class":68},"'.show-modal'",[47,331,326],{"class":53},[47,333,304],{"class":129},[47,335,307],{"class":53},[47,337,338,341,344,346,349,351,353,356,359,361,364],{"class":49,"line":97},[47,339,340],{"class":129},"    const",[47,342,343],{"class":133}," nextId",[47,345,137],{"class":129},[47,347,348],{"class":61}," $",[47,350,146],{"class":53},[47,352,229],{"class":133},[47,354,355],{"class":53},").",[47,357,358],{"class":61},"data",[47,360,146],{"class":53},[47,362,363],{"class":68},"'show-modal'",[47,365,152],{"class":53},[47,367,368,371,374,377],{"class":49,"line":163},[47,369,370],{"class":129},"    if",[47,372,373],{"class":53}," (nextId) ",[47,375,376],{"class":61},"showModal",[47,378,379],{"class":53},"(nextId)\n",[47,381,382],{"class":49,"line":181},[47,383,384],{"class":53},"  })\n",[47,386,387],{"class":49,"line":187},[47,388,191],{"emptyLinePlaceholder":190},[47,390,391,394,397,399,403],{"class":49,"line":194},[47,392,393],{"class":129},"  function",[47,395,396],{"class":61}," showModal",[47,398,146],{"class":53},[47,400,402],{"class":401},"sqxcx","modalId",[47,404,405],{"class":53},") {\n",[47,407,408,410,413,415,417,419,422,425],{"class":49,"line":213},[47,409,340],{"class":129},[47,411,412],{"class":133}," newModal",[47,414,137],{"class":129},[47,416,348],{"class":61},[47,418,146],{"class":53},[47,420,421],{"class":68},"'#'",[47,423,424],{"class":129}," +",[47,426,427],{"class":53}," modalId)\n",[47,429,430,432,435,437,440,443,446,449,452],{"class":49,"line":218},[47,431,340],{"class":129},[47,433,434],{"class":133}," modalInstance",[47,436,137],{"class":129},[47,438,439],{"class":129}," new",[47,441,442],{"class":53}," bootstrap.",[47,444,445],{"class":61},"Modal",[47,447,448],{"class":53},"(newModal[",[47,450,451],{"class":133},"0",[47,453,454],{"class":53},"])\n",[47,456,458,461,464],{"class":49,"line":457},10,[47,459,460],{"class":53},"    modalInstance.",[47,462,463],{"class":61},"show",[47,465,178],{"class":53},[47,467,469],{"class":49,"line":468},11,[47,470,191],{"emptyLinePlaceholder":190},[47,472,474,477],{"class":49,"line":473},12,[47,475,476],{"class":61},"    _setupModalZIndex",[47,478,479],{"class":53},"(newModal)\n",[47,481,483,486],{"class":49,"line":482},13,[47,484,485],{"class":61},"    _setupBackdrop",[47,487,488],{"class":53},"(modalId)\n",[47,490,492,495],{"class":49,"line":491},14,[47,493,494],{"class":61},"    _cleanupModal",[47,496,497],{"class":53},"(newModal, modalId)\n",[47,499,501],{"class":49,"line":500},15,[47,502,503],{"class":53},"  }\n",[47,505,507],{"class":49,"line":506},16,[47,508,191],{"emptyLinePlaceholder":190},[47,510,512],{"class":49,"line":511},17,[47,513,514],{"class":123},"  /**\n",[47,516,518],{"class":49,"line":517},18,[47,519,520],{"class":123},"   * モーダルのz-indexを設定する\n",[47,522,524],{"class":49,"line":523},19,[47,525,526],{"class":123},"   * z-index = 1040 + 10 * 表示中のモーダル数（Bootstrap標準の重なり順に準拠）\n",[47,528,530],{"class":49,"line":529},20,[47,531,532],{"class":123},"   * ex: 1段目: 1040, 2段目: 1050, 3段目: 1060, ...\n",[47,534,536],{"class":49,"line":535},21,[47,537,538],{"class":123},"   */\n",[47,540,542,544,547,549,552],{"class":49,"line":541},22,[47,543,393],{"class":129},[47,545,546],{"class":61}," _setupModalZIndex",[47,548,146],{"class":53},[47,550,551],{"class":401},"modal",[47,553,405],{"class":53},[47,555,557,560,563,565,568,570,572],{"class":49,"line":556},23,[47,558,559],{"class":53},"    modal.",[47,561,562],{"class":61},"one",[47,564,146],{"class":53},[47,566,567],{"class":68},"'shown.bs.modal'",[47,569,326],{"class":53},[47,571,304],{"class":129},[47,573,307],{"class":53},[47,575,577,580,583,585,587,589,592,594],{"class":49,"line":576},24,[47,578,579],{"class":129},"      const",[47,581,582],{"class":133}," modalCount",[47,584,137],{"class":129},[47,586,348],{"class":61},[47,588,146],{"class":53},[47,590,591],{"class":68},"'.modal.show'",[47,593,355],{"class":53},[47,595,596],{"class":133},"length\n",[47,598,600,602,605,607,610,612,615,618],{"class":49,"line":599},25,[47,601,579],{"class":129},[47,603,604],{"class":133}," zIndex",[47,606,137],{"class":129},[47,608,609],{"class":133}," 1040",[47,611,424],{"class":129},[47,613,614],{"class":133}," 10",[47,616,617],{"class":129}," *",[47,619,620],{"class":53}," modalCount\n",[47,622,624,627,630,632,635],{"class":49,"line":623},26,[47,625,626],{"class":53},"      modal.",[47,628,629],{"class":61},"css",[47,631,146],{"class":53},[47,633,634],{"class":68},"'z-index'",[47,636,637],{"class":53},", zIndex)\n",[47,639,641,643,645,647,650,653],{"class":49,"line":640},27,[47,642,626],{"class":53},[47,644,358],{"class":61},[47,646,146],{"class":53},[47,648,649],{"class":68},"'zIndex'",[47,651,652],{"class":53},", zIndex) ",[47,654,655],{"class":123},"// backdropで使うために保存しておく\n",[47,657,659],{"class":49,"line":658},28,[47,660,661],{"class":53},"    })\n",[47,663,665],{"class":49,"line":664},29,[47,666,503],{"class":53},[47,668,670],{"class":49,"line":669},30,[47,671,191],{"emptyLinePlaceholder":190},[47,673,675],{"class":49,"line":674},31,[47,676,514],{"class":123},[47,678,680],{"class":49,"line":679},32,[47,681,682],{"class":123},"   * モーダルbackdropのz-indexを調整する\n",[47,684,686],{"class":49,"line":685},33,[47,687,688],{"class":123},"   * ex: 1段目: 1039, 2段目: 1049, 3段目: 1059, ...\n",[47,690,692],{"class":49,"line":691},34,[47,693,538],{"class":123},[47,695,697,699,702,704,706],{"class":49,"line":696},35,[47,698,393],{"class":129},[47,700,701],{"class":61}," _setupBackdrop",[47,703,146],{"class":53},[47,705,402],{"class":401},[47,707,405],{"class":53},[47,709,711],{"class":49,"line":710},36,[47,712,713],{"class":123},"    // z-index の設定は shown.bs.modal の後でないと正しい数にならない\n",[47,715,717,720,722,724,726,729,731,733,735,737,739],{"class":49,"line":716},37,[47,718,719],{"class":61},"    $",[47,721,146],{"class":53},[47,723,421],{"class":68},[47,725,424],{"class":129},[47,727,728],{"class":53}," modalId).",[47,730,562],{"class":61},[47,732,146],{"class":53},[47,734,567],{"class":68},[47,736,326],{"class":53},[47,738,304],{"class":129},[47,740,307],{"class":53},[47,742,744,746,749,751,753,755,757],{"class":49,"line":743},38,[47,745,579],{"class":129},[47,747,748],{"class":133}," modal",[47,750,137],{"class":129},[47,752,348],{"class":61},[47,754,146],{"class":53},[47,756,229],{"class":133},[47,758,152],{"class":53},[47,760,762,764,766,768,771,773,775,777],{"class":49,"line":761},39,[47,763,579],{"class":129},[47,765,604],{"class":133},[47,767,137],{"class":129},[47,769,770],{"class":53}," modal.",[47,772,358],{"class":61},[47,774,146],{"class":53},[47,776,649],{"class":68},[47,778,152],{"class":53},[47,780,782],{"class":49,"line":781},40,[47,783,191],{"emptyLinePlaceholder":190},[47,785,787,789,792,794,796,798,801,803,806,808,811,813,816],{"class":49,"line":786},41,[47,788,579],{"class":129},[47,790,791],{"class":133}," backdrop",[47,793,137],{"class":129},[47,795,348],{"class":61},[47,797,146],{"class":53},[47,799,800],{"class":68},"'.modal-backdrop'",[47,802,355],{"class":53},[47,804,805],{"class":61},"not",[47,807,146],{"class":53},[47,809,810],{"class":68},"'.modal-stack'",[47,812,355],{"class":53},[47,814,815],{"class":61},"last",[47,817,178],{"class":53},[47,819,821],{"class":49,"line":820},42,[47,822,191],{"emptyLinePlaceholder":190},[47,824,826],{"class":49,"line":825},43,[47,827,828],{"class":53},"      backdrop\n",[47,830,832,835,837,839,841,844,847,850,853],{"class":49,"line":831},44,[47,833,834],{"class":53},"        .",[47,836,629],{"class":61},[47,838,146],{"class":53},[47,840,634],{"class":68},[47,842,843],{"class":53},", zIndex ",[47,845,846],{"class":129},"-",[47,848,849],{"class":133}," 1",[47,851,852],{"class":53},") ",[47,854,855],{"class":123},"// モーダルより1つ下に配置\n",[47,857,859,861,864,866,869],{"class":49,"line":858},45,[47,860,834],{"class":53},[47,862,863],{"class":61},"addClass",[47,865,146],{"class":53},[47,867,868],{"class":68},"'modal-stack'",[47,870,152],{"class":53},[47,872,874,876,879,881,884,887],{"class":49,"line":873},46,[47,875,834],{"class":53},[47,877,878],{"class":61},"attr",[47,880,146],{"class":53},[47,882,883],{"class":68},"'data-backdrop-for'",[47,885,886],{"class":53},", modalId) ",[47,888,889],{"class":123},"// 削除処理のためにモーダルIDで関連付け\n",[47,891,893],{"class":49,"line":892},47,[47,894,661],{"class":53},[47,896,898],{"class":49,"line":897},48,[47,899,503],{"class":53},[47,901,903],{"class":49,"line":902},49,[47,904,191],{"emptyLinePlaceholder":190},[47,906,908],{"class":49,"line":907},50,[47,909,514],{"class":123},[47,911,913],{"class":49,"line":912},51,[47,914,915],{"class":123},"   * モーダルが閉じられたとき（hidden.bs.modal）に、対応するbackdropを削除し、\n",[47,917,919],{"class":49,"line":918},52,[47,920,921],{"class":123},"   * フォーカスを親モーダルかbodyへ逃がす\n",[47,923,925],{"class":49,"line":924},53,[47,926,538],{"class":123},[47,928,930,932,935,937,939,941,943],{"class":49,"line":929},54,[47,931,393],{"class":129},[47,933,934],{"class":61}," _cleanupModal",[47,936,146],{"class":53},[47,938,551],{"class":401},[47,940,326],{"class":53},[47,942,402],{"class":401},[47,944,405],{"class":53},[47,946,948,950,952,954,957,960,963],{"class":49,"line":947},55,[47,949,559],{"class":53},[47,951,562],{"class":61},[47,953,146],{"class":53},[47,955,956],{"class":68},"'hidden.bs.modal'",[47,958,959],{"class":53},", () ",[47,961,962],{"class":129},"=>",[47,964,965],{"class":53}," {\n",[47,967,969,972,974,977,979,982,984,987],{"class":49,"line":968},56,[47,970,971],{"class":61},"      $",[47,973,146],{"class":53},[47,975,976],{"class":68},"`.modal-backdrop[data-backdrop-for=\"${",[47,978,402],{"class":53},[47,980,981],{"class":68},"}\"]`",[47,983,355],{"class":53},[47,985,986],{"class":61},"remove",[47,988,178],{"class":53},[47,990,992],{"class":49,"line":991},57,[47,993,191],{"emptyLinePlaceholder":190},[47,995,997,999,1002,1004,1006,1008,1010],{"class":49,"line":996},58,[47,998,579],{"class":129},[47,1000,1001],{"class":133}," openModals",[47,1003,137],{"class":129},[47,1005,348],{"class":61},[47,1007,146],{"class":53},[47,1009,591],{"class":68},[47,1011,152],{"class":53},[47,1013,1015,1018,1021,1024,1027,1030],{"class":49,"line":1014},59,[47,1016,1017],{"class":129},"      if",[47,1019,1020],{"class":53}," (openModals.",[47,1022,1023],{"class":133},"length",[47,1025,1026],{"class":129}," >",[47,1028,1029],{"class":133}," 0",[47,1031,405],{"class":53},[47,1033,1035],{"class":49,"line":1034},60,[47,1036,1037],{"class":123},"        // 親モーダルにフォーカスを当てる\n",[47,1039,1041,1044,1047,1049,1052,1054],{"class":49,"line":1040},61,[47,1042,1043],{"class":129},"        const",[47,1045,1046],{"class":133}," lastModal",[47,1048,137],{"class":129},[47,1050,1051],{"class":53}," openModals.",[47,1053,815],{"class":61},[47,1055,178],{"class":53},[47,1057,1059,1061,1064,1066],{"class":49,"line":1058},62,[47,1060,1043],{"class":129},[47,1062,1063],{"class":133}," focusTarget",[47,1065,137],{"class":129},[47,1067,1068],{"class":53}," lastModal\n",[47,1070,1072,1075,1078,1080,1083],{"class":49,"line":1071},63,[47,1073,1074],{"class":53},"          .",[47,1076,1077],{"class":61},"find",[47,1079,146],{"class":53},[47,1081,1082],{"class":68},"'[autofocus], .btn-close, .btn, input, select'",[47,1084,152],{"class":53},[47,1086,1088,1090,1093],{"class":49,"line":1087},64,[47,1089,1074],{"class":53},[47,1091,1092],{"class":61},"first",[47,1094,178],{"class":53},[47,1096,1098,1101,1104,1106,1109,1112,1114,1117],{"class":49,"line":1097},65,[47,1099,1100],{"class":129},"        if",[47,1102,1103],{"class":53}," (focusTarget.",[47,1105,1023],{"class":133},[47,1107,1108],{"class":53},") focusTarget.",[47,1110,1111],{"class":61},"trigger",[47,1113,146],{"class":53},[47,1115,1116],{"class":68},"'focus'",[47,1118,152],{"class":53},[47,1120,1122,1125,1128],{"class":49,"line":1121},66,[47,1123,1124],{"class":53},"      } ",[47,1126,1127],{"class":129},"else",[47,1129,965],{"class":53},[47,1131,1133],{"class":49,"line":1132},67,[47,1134,1135],{"class":123},"        // 最後のモーダルを閉じた場合、bodyにフォーカスを逃がす（アクセシビリティ対策）\n",[47,1137,1139,1142,1145,1147,1149,1152],{"class":49,"line":1138},68,[47,1140,1141],{"class":61},"        $",[47,1143,1144],{"class":53},"(document.activeElement).",[47,1146,1111],{"class":61},[47,1148,146],{"class":53},[47,1150,1151],{"class":68},"'blur'",[47,1153,152],{"class":53},[47,1155,1157,1159,1161,1164,1166,1168,1170,1172],{"class":49,"line":1156},69,[47,1158,1141],{"class":61},[47,1160,146],{"class":53},[47,1162,1163],{"class":68},"'body'",[47,1165,355],{"class":53},[47,1167,1111],{"class":61},[47,1169,146],{"class":53},[47,1171,1116],{"class":68},[47,1173,152],{"class":53},[47,1175,1177],{"class":49,"line":1176},70,[47,1178,1179],{"class":53},"      }\n",[47,1181,1183],{"class":49,"line":1182},71,[47,1184,661],{"class":53},[47,1186,1188],{"class":49,"line":1187},72,[47,1189,503],{"class":53},[47,1191,1193],{"class":49,"line":1192},73,[47,1194,1195],{"class":53},"})\n",[288,1197,42],{"id":42},[38,1199,1201],{"className":40,"code":1200,"language":42,"meta":43,"style":43},"\u003Clink\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\"\n  rel=\"stylesheet\"\n/>\n\u003Cscript src=\"https://code.jquery.com/jquery-3.7.1.min.js\">\u003C/script>\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\">\u003C/script>\n\n\u003Cbutton class=\"btn btn-primary show-modal\" data-show-modal=\"modal1\">\n  Open Modal 1\n\u003C/button>\n\n\u003C!-- モーダル1 -->\n\u003Cdiv class=\"modal\" id=\"modal1\" tabindex=\"-1\">\n  \u003Cdiv class=\"modal-dialog\">\n    \u003Cdiv class=\"modal-content\">\n      \u003Cdiv class=\"modal-header\">\n        \u003Ch5 class=\"modal-title\">Modal 1\u003C/h5>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"modal\"\n        >\u003C/button>\n      \u003C/div>\n      \u003Cdiv class=\"modal-body\">\n        \u003Cbutton class=\"btn btn-secondary show-modal\" data-show-modal=\"modal2\">\n          Open Modal 2\n        \u003C/button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n\n\u003C!-- モーダル2 -->\n\u003Cdiv class=\"modal\" id=\"modal2\" tabindex=\"-1\">\n  \u003Cdiv class=\"modal-dialog\">\n    \u003Cdiv class=\"modal-content\">\n      \u003Cdiv class=\"modal-header\">\n        \u003Ch5 class=\"modal-title\">Modal 2\u003C/h5>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"modal\"\n        >\u003C/button>\n      \u003C/div>\n      \u003Cdiv class=\"modal-body\">\n        \u003Cbutton class=\"btn btn-secondary show-modal\" data-show-modal=\"modal3\">\n          Open Modal 3\n        \u003C/button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n\n\u003C!-- モーダル3 -->\n\u003Cdiv class=\"modal\" id=\"modal3\" tabindex=\"-1\">\n  \u003Cdiv class=\"modal-dialog\">\n    \u003Cdiv class=\"modal-content\">\n      \u003Cdiv class=\"modal-header\">\n        \u003Ch5 class=\"modal-title\">Modal 3\u003C/h5>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"modal\"\n        >\u003C/button>\n      \u003C/div>\n      \u003Cdiv class=\"modal-body\">\n        \u003Cbutton class=\"btn btn-secondary show-modal\" data-show-modal=\"modal4\">\n          Open Modal 4\n        \u003C/button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n\n\u003C!-- モーダル4 -->\n\u003Cdiv class=\"modal\" id=\"modal4\" tabindex=\"-1\">\n  \u003Cdiv class=\"modal-dialog\">\n    \u003Cdiv class=\"modal-content\">\n      \u003Cdiv class=\"modal-header\">\n        \u003Ch5 class=\"modal-title\">Modal 4\u003C/h5>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"modal\"\n        >\u003C/button>\n      \u003C/div>\n      \u003Cdiv class=\"modal-body\">\n        \u003Cbutton class=\"btn btn-secondary show-modal\" data-show-modal=\"modal5\">\n          Open Modal 5\n        \u003C/button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n\n\u003C!-- モーダル5 -->\n\u003Cdiv class=\"modal\" id=\"modal5\" tabindex=\"-1\">\n  \u003Cdiv class=\"modal-dialog\">\n    \u003Cdiv class=\"modal-content\">\n      \u003Cdiv class=\"modal-header\">\n        \u003Ch5 class=\"modal-title\">Modal 5\u003C/h5>\n        \u003Cbutton\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"modal\"\n        >\u003C/button>\n      \u003C/div>\n      \u003Cdiv class=\"modal-body\">\n        \u003Cp>Last modal (5)\u003C/p>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n",[14,1202,1203,1210,1220,1230,1235,1257,1276,1280,1303,1308,1316,1320,1325,1355,1371,1387,1403,1425,1432,1442,1452,1462,1471,1480,1495,1517,1522,1531,1539,1548,1557,1565,1569,1574,1600,1614,1628,1642,1661,1667,1675,1683,1691,1699,1707,1721,1742,1747,1755,1763,1771,1779,1787,1791,1796,1822,1836,1850,1864,1883,1889,1897,1905,1913,1921,1929,1943,1964,1969,1977,1985,1993,2001,2009,2014,2020,2047,2062,2077,2092,2112,2119,2128,2137,2146,2155,2164,2179,2201,2207,2216,2225,2234,2243,2252,2257,2263,2290,2305,2320,2335,2355,2362,2371,2380,2389,2398,2407,2422,2436,2445,2454,2463],{"__ignoreMap":43},[47,1204,1205,1207],{"class":49,"line":50},[47,1206,54],{"class":53},[47,1208,1209],{"class":57},"link\n",[47,1211,1212,1215,1217],{"class":49,"line":91},[47,1213,1214],{"class":61},"  href",[47,1216,65],{"class":53},[47,1218,1219],{"class":68},"\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\"\n",[47,1221,1222,1225,1227],{"class":49,"line":97},[47,1223,1224],{"class":61},"  rel",[47,1226,65],{"class":53},[47,1228,1229],{"class":68},"\"stylesheet\"\n",[47,1231,1232],{"class":49,"line":163},[47,1233,1234],{"class":53},"/>\n",[47,1236,1237,1239,1242,1245,1247,1250,1253,1255],{"class":49,"line":181},[47,1238,54],{"class":53},[47,1240,1241],{"class":57},"script",[47,1243,1244],{"class":61}," src",[47,1246,65],{"class":53},[47,1248,1249],{"class":68},"\"https://code.jquery.com/jquery-3.7.1.min.js\"",[47,1251,1252],{"class":53},">\u003C/",[47,1254,1241],{"class":57},[47,1256,88],{"class":53},[47,1258,1259,1261,1263,1265,1267,1270,1272,1274],{"class":49,"line":187},[47,1260,54],{"class":53},[47,1262,1241],{"class":57},[47,1264,1244],{"class":61},[47,1266,65],{"class":53},[47,1268,1269],{"class":68},"\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\"",[47,1271,1252],{"class":53},[47,1273,1241],{"class":57},[47,1275,88],{"class":53},[47,1277,1278],{"class":49,"line":194},[47,1279,191],{"emptyLinePlaceholder":190},[47,1281,1282,1284,1286,1288,1290,1293,1296,1298,1301],{"class":49,"line":213},[47,1283,54],{"class":53},[47,1285,58],{"class":57},[47,1287,62],{"class":61},[47,1289,65],{"class":53},[47,1291,1292],{"class":68},"\"btn btn-primary show-modal\"",[47,1294,1295],{"class":61}," data-show-modal",[47,1297,65],{"class":53},[47,1299,1300],{"class":68},"\"modal1\"",[47,1302,88],{"class":53},[47,1304,1305],{"class":49,"line":218},[47,1306,1307],{"class":53},"  Open Modal 1\n",[47,1309,1310,1312,1314],{"class":49,"line":457},[47,1311,100],{"class":53},[47,1313,58],{"class":57},[47,1315,88],{"class":53},[47,1317,1318],{"class":49,"line":468},[47,1319,191],{"emptyLinePlaceholder":190},[47,1321,1322],{"class":49,"line":473},[47,1323,1324],{"class":123},"\u003C!-- モーダル1 -->\n",[47,1326,1327,1329,1332,1334,1336,1338,1341,1343,1345,1348,1350,1353],{"class":49,"line":482},[47,1328,54],{"class":53},[47,1330,1331],{"class":57},"div",[47,1333,62],{"class":61},[47,1335,65],{"class":53},[47,1337,85],{"class":68},[47,1339,1340],{"class":61}," id",[47,1342,65],{"class":53},[47,1344,1300],{"class":68},[47,1346,1347],{"class":61}," tabindex",[47,1349,65],{"class":53},[47,1351,1352],{"class":68},"\"-1\"",[47,1354,88],{"class":53},[47,1356,1357,1360,1362,1364,1366,1369],{"class":49,"line":491},[47,1358,1359],{"class":53},"  \u003C",[47,1361,1331],{"class":57},[47,1363,62],{"class":61},[47,1365,65],{"class":53},[47,1367,1368],{"class":68},"\"modal-dialog\"",[47,1370,88],{"class":53},[47,1372,1373,1376,1378,1380,1382,1385],{"class":49,"line":500},[47,1374,1375],{"class":53},"    \u003C",[47,1377,1331],{"class":57},[47,1379,62],{"class":61},[47,1381,65],{"class":53},[47,1383,1384],{"class":68},"\"modal-content\"",[47,1386,88],{"class":53},[47,1388,1389,1392,1394,1396,1398,1401],{"class":49,"line":506},[47,1390,1391],{"class":53},"      \u003C",[47,1393,1331],{"class":57},[47,1395,62],{"class":61},[47,1397,65],{"class":53},[47,1399,1400],{"class":68},"\"modal-header\"",[47,1402,88],{"class":53},[47,1404,1405,1408,1411,1413,1415,1418,1421,1423],{"class":49,"line":511},[47,1406,1407],{"class":53},"        \u003C",[47,1409,1410],{"class":57},"h5",[47,1412,62],{"class":61},[47,1414,65],{"class":53},[47,1416,1417],{"class":68},"\"modal-title\"",[47,1419,1420],{"class":53},">Modal 1\u003C/",[47,1422,1410],{"class":57},[47,1424,88],{"class":53},[47,1426,1427,1429],{"class":49,"line":517},[47,1428,1407],{"class":53},[47,1430,1431],{"class":57},"button\n",[47,1433,1434,1437,1439],{"class":49,"line":523},[47,1435,1436],{"class":61},"          type",[47,1438,65],{"class":53},[47,1440,1441],{"class":68},"\"button\"\n",[47,1443,1444,1447,1449],{"class":49,"line":529},[47,1445,1446],{"class":61},"          class",[47,1448,65],{"class":53},[47,1450,1451],{"class":68},"\"btn-close\"\n",[47,1453,1454,1457,1459],{"class":49,"line":535},[47,1455,1456],{"class":61},"          data-bs-dismiss",[47,1458,65],{"class":53},[47,1460,1461],{"class":68},"\"modal\"\n",[47,1463,1464,1467,1469],{"class":49,"line":541},[47,1465,1466],{"class":53},"        >\u003C/",[47,1468,58],{"class":57},[47,1470,88],{"class":53},[47,1472,1473,1476,1478],{"class":49,"line":556},[47,1474,1475],{"class":53},"      \u003C/",[47,1477,1331],{"class":57},[47,1479,88],{"class":53},[47,1481,1482,1484,1486,1488,1490,1493],{"class":49,"line":576},[47,1483,1391],{"class":53},[47,1485,1331],{"class":57},[47,1487,62],{"class":61},[47,1489,65],{"class":53},[47,1491,1492],{"class":68},"\"modal-body\"",[47,1494,88],{"class":53},[47,1496,1497,1499,1501,1503,1505,1508,1510,1512,1515],{"class":49,"line":599},[47,1498,1407],{"class":53},[47,1500,58],{"class":57},[47,1502,62],{"class":61},[47,1504,65],{"class":53},[47,1506,1507],{"class":68},"\"btn btn-secondary show-modal\"",[47,1509,1295],{"class":61},[47,1511,65],{"class":53},[47,1513,1514],{"class":68},"\"modal2\"",[47,1516,88],{"class":53},[47,1518,1519],{"class":49,"line":623},[47,1520,1521],{"class":53},"          Open Modal 2\n",[47,1523,1524,1527,1529],{"class":49,"line":640},[47,1525,1526],{"class":53},"        \u003C/",[47,1528,58],{"class":57},[47,1530,88],{"class":53},[47,1532,1533,1535,1537],{"class":49,"line":658},[47,1534,1475],{"class":53},[47,1536,1331],{"class":57},[47,1538,88],{"class":53},[47,1540,1541,1544,1546],{"class":49,"line":664},[47,1542,1543],{"class":53},"    \u003C/",[47,1545,1331],{"class":57},[47,1547,88],{"class":53},[47,1549,1550,1553,1555],{"class":49,"line":669},[47,1551,1552],{"class":53},"  \u003C/",[47,1554,1331],{"class":57},[47,1556,88],{"class":53},[47,1558,1559,1561,1563],{"class":49,"line":674},[47,1560,100],{"class":53},[47,1562,1331],{"class":57},[47,1564,88],{"class":53},[47,1566,1567],{"class":49,"line":679},[47,1568,191],{"emptyLinePlaceholder":190},[47,1570,1571],{"class":49,"line":685},[47,1572,1573],{"class":123},"\u003C!-- モーダル2 -->\n",[47,1575,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598],{"class":49,"line":691},[47,1577,54],{"class":53},[47,1579,1331],{"class":57},[47,1581,62],{"class":61},[47,1583,65],{"class":53},[47,1585,85],{"class":68},[47,1587,1340],{"class":61},[47,1589,65],{"class":53},[47,1591,1514],{"class":68},[47,1593,1347],{"class":61},[47,1595,65],{"class":53},[47,1597,1352],{"class":68},[47,1599,88],{"class":53},[47,1601,1602,1604,1606,1608,1610,1612],{"class":49,"line":696},[47,1603,1359],{"class":53},[47,1605,1331],{"class":57},[47,1607,62],{"class":61},[47,1609,65],{"class":53},[47,1611,1368],{"class":68},[47,1613,88],{"class":53},[47,1615,1616,1618,1620,1622,1624,1626],{"class":49,"line":710},[47,1617,1375],{"class":53},[47,1619,1331],{"class":57},[47,1621,62],{"class":61},[47,1623,65],{"class":53},[47,1625,1384],{"class":68},[47,1627,88],{"class":53},[47,1629,1630,1632,1634,1636,1638,1640],{"class":49,"line":716},[47,1631,1391],{"class":53},[47,1633,1331],{"class":57},[47,1635,62],{"class":61},[47,1637,65],{"class":53},[47,1639,1400],{"class":68},[47,1641,88],{"class":53},[47,1643,1644,1646,1648,1650,1652,1654,1657,1659],{"class":49,"line":743},[47,1645,1407],{"class":53},[47,1647,1410],{"class":57},[47,1649,62],{"class":61},[47,1651,65],{"class":53},[47,1653,1417],{"class":68},[47,1655,1656],{"class":53},">Modal 2\u003C/",[47,1658,1410],{"class":57},[47,1660,88],{"class":53},[47,1662,1663,1665],{"class":49,"line":761},[47,1664,1407],{"class":53},[47,1666,1431],{"class":57},[47,1668,1669,1671,1673],{"class":49,"line":781},[47,1670,1436],{"class":61},[47,1672,65],{"class":53},[47,1674,1441],{"class":68},[47,1676,1677,1679,1681],{"class":49,"line":786},[47,1678,1446],{"class":61},[47,1680,65],{"class":53},[47,1682,1451],{"class":68},[47,1684,1685,1687,1689],{"class":49,"line":820},[47,1686,1456],{"class":61},[47,1688,65],{"class":53},[47,1690,1461],{"class":68},[47,1692,1693,1695,1697],{"class":49,"line":825},[47,1694,1466],{"class":53},[47,1696,58],{"class":57},[47,1698,88],{"class":53},[47,1700,1701,1703,1705],{"class":49,"line":831},[47,1702,1475],{"class":53},[47,1704,1331],{"class":57},[47,1706,88],{"class":53},[47,1708,1709,1711,1713,1715,1717,1719],{"class":49,"line":858},[47,1710,1391],{"class":53},[47,1712,1331],{"class":57},[47,1714,62],{"class":61},[47,1716,65],{"class":53},[47,1718,1492],{"class":68},[47,1720,88],{"class":53},[47,1722,1723,1725,1727,1729,1731,1733,1735,1737,1740],{"class":49,"line":873},[47,1724,1407],{"class":53},[47,1726,58],{"class":57},[47,1728,62],{"class":61},[47,1730,65],{"class":53},[47,1732,1507],{"class":68},[47,1734,1295],{"class":61},[47,1736,65],{"class":53},[47,1738,1739],{"class":68},"\"modal3\"",[47,1741,88],{"class":53},[47,1743,1744],{"class":49,"line":892},[47,1745,1746],{"class":53},"          Open Modal 3\n",[47,1748,1749,1751,1753],{"class":49,"line":897},[47,1750,1526],{"class":53},[47,1752,58],{"class":57},[47,1754,88],{"class":53},[47,1756,1757,1759,1761],{"class":49,"line":902},[47,1758,1475],{"class":53},[47,1760,1331],{"class":57},[47,1762,88],{"class":53},[47,1764,1765,1767,1769],{"class":49,"line":907},[47,1766,1543],{"class":53},[47,1768,1331],{"class":57},[47,1770,88],{"class":53},[47,1772,1773,1775,1777],{"class":49,"line":912},[47,1774,1552],{"class":53},[47,1776,1331],{"class":57},[47,1778,88],{"class":53},[47,1780,1781,1783,1785],{"class":49,"line":918},[47,1782,100],{"class":53},[47,1784,1331],{"class":57},[47,1786,88],{"class":53},[47,1788,1789],{"class":49,"line":924},[47,1790,191],{"emptyLinePlaceholder":190},[47,1792,1793],{"class":49,"line":929},[47,1794,1795],{"class":123},"\u003C!-- モーダル3 -->\n",[47,1797,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820],{"class":49,"line":947},[47,1799,54],{"class":53},[47,1801,1331],{"class":57},[47,1803,62],{"class":61},[47,1805,65],{"class":53},[47,1807,85],{"class":68},[47,1809,1340],{"class":61},[47,1811,65],{"class":53},[47,1813,1739],{"class":68},[47,1815,1347],{"class":61},[47,1817,65],{"class":53},[47,1819,1352],{"class":68},[47,1821,88],{"class":53},[47,1823,1824,1826,1828,1830,1832,1834],{"class":49,"line":968},[47,1825,1359],{"class":53},[47,1827,1331],{"class":57},[47,1829,62],{"class":61},[47,1831,65],{"class":53},[47,1833,1368],{"class":68},[47,1835,88],{"class":53},[47,1837,1838,1840,1842,1844,1846,1848],{"class":49,"line":991},[47,1839,1375],{"class":53},[47,1841,1331],{"class":57},[47,1843,62],{"class":61},[47,1845,65],{"class":53},[47,1847,1384],{"class":68},[47,1849,88],{"class":53},[47,1851,1852,1854,1856,1858,1860,1862],{"class":49,"line":996},[47,1853,1391],{"class":53},[47,1855,1331],{"class":57},[47,1857,62],{"class":61},[47,1859,65],{"class":53},[47,1861,1400],{"class":68},[47,1863,88],{"class":53},[47,1865,1866,1868,1870,1872,1874,1876,1879,1881],{"class":49,"line":1014},[47,1867,1407],{"class":53},[47,1869,1410],{"class":57},[47,1871,62],{"class":61},[47,1873,65],{"class":53},[47,1875,1417],{"class":68},[47,1877,1878],{"class":53},">Modal 3\u003C/",[47,1880,1410],{"class":57},[47,1882,88],{"class":53},[47,1884,1885,1887],{"class":49,"line":1034},[47,1886,1407],{"class":53},[47,1888,1431],{"class":57},[47,1890,1891,1893,1895],{"class":49,"line":1040},[47,1892,1436],{"class":61},[47,1894,65],{"class":53},[47,1896,1441],{"class":68},[47,1898,1899,1901,1903],{"class":49,"line":1058},[47,1900,1446],{"class":61},[47,1902,65],{"class":53},[47,1904,1451],{"class":68},[47,1906,1907,1909,1911],{"class":49,"line":1071},[47,1908,1456],{"class":61},[47,1910,65],{"class":53},[47,1912,1461],{"class":68},[47,1914,1915,1917,1919],{"class":49,"line":1087},[47,1916,1466],{"class":53},[47,1918,58],{"class":57},[47,1920,88],{"class":53},[47,1922,1923,1925,1927],{"class":49,"line":1097},[47,1924,1475],{"class":53},[47,1926,1331],{"class":57},[47,1928,88],{"class":53},[47,1930,1931,1933,1935,1937,1939,1941],{"class":49,"line":1121},[47,1932,1391],{"class":53},[47,1934,1331],{"class":57},[47,1936,62],{"class":61},[47,1938,65],{"class":53},[47,1940,1492],{"class":68},[47,1942,88],{"class":53},[47,1944,1945,1947,1949,1951,1953,1955,1957,1959,1962],{"class":49,"line":1132},[47,1946,1407],{"class":53},[47,1948,58],{"class":57},[47,1950,62],{"class":61},[47,1952,65],{"class":53},[47,1954,1507],{"class":68},[47,1956,1295],{"class":61},[47,1958,65],{"class":53},[47,1960,1961],{"class":68},"\"modal4\"",[47,1963,88],{"class":53},[47,1965,1966],{"class":49,"line":1138},[47,1967,1968],{"class":53},"          Open Modal 4\n",[47,1970,1971,1973,1975],{"class":49,"line":1156},[47,1972,1526],{"class":53},[47,1974,58],{"class":57},[47,1976,88],{"class":53},[47,1978,1979,1981,1983],{"class":49,"line":1176},[47,1980,1475],{"class":53},[47,1982,1331],{"class":57},[47,1984,88],{"class":53},[47,1986,1987,1989,1991],{"class":49,"line":1182},[47,1988,1543],{"class":53},[47,1990,1331],{"class":57},[47,1992,88],{"class":53},[47,1994,1995,1997,1999],{"class":49,"line":1187},[47,1996,1552],{"class":53},[47,1998,1331],{"class":57},[47,2000,88],{"class":53},[47,2002,2003,2005,2007],{"class":49,"line":1192},[47,2004,100],{"class":53},[47,2006,1331],{"class":57},[47,2008,88],{"class":53},[47,2010,2012],{"class":49,"line":2011},74,[47,2013,191],{"emptyLinePlaceholder":190},[47,2015,2017],{"class":49,"line":2016},75,[47,2018,2019],{"class":123},"\u003C!-- モーダル4 -->\n",[47,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045],{"class":49,"line":2022},76,[47,2024,54],{"class":53},[47,2026,1331],{"class":57},[47,2028,62],{"class":61},[47,2030,65],{"class":53},[47,2032,85],{"class":68},[47,2034,1340],{"class":61},[47,2036,65],{"class":53},[47,2038,1961],{"class":68},[47,2040,1347],{"class":61},[47,2042,65],{"class":53},[47,2044,1352],{"class":68},[47,2046,88],{"class":53},[47,2048,2050,2052,2054,2056,2058,2060],{"class":49,"line":2049},77,[47,2051,1359],{"class":53},[47,2053,1331],{"class":57},[47,2055,62],{"class":61},[47,2057,65],{"class":53},[47,2059,1368],{"class":68},[47,2061,88],{"class":53},[47,2063,2065,2067,2069,2071,2073,2075],{"class":49,"line":2064},78,[47,2066,1375],{"class":53},[47,2068,1331],{"class":57},[47,2070,62],{"class":61},[47,2072,65],{"class":53},[47,2074,1384],{"class":68},[47,2076,88],{"class":53},[47,2078,2080,2082,2084,2086,2088,2090],{"class":49,"line":2079},79,[47,2081,1391],{"class":53},[47,2083,1331],{"class":57},[47,2085,62],{"class":61},[47,2087,65],{"class":53},[47,2089,1400],{"class":68},[47,2091,88],{"class":53},[47,2093,2095,2097,2099,2101,2103,2105,2108,2110],{"class":49,"line":2094},80,[47,2096,1407],{"class":53},[47,2098,1410],{"class":57},[47,2100,62],{"class":61},[47,2102,65],{"class":53},[47,2104,1417],{"class":68},[47,2106,2107],{"class":53},">Modal 4\u003C/",[47,2109,1410],{"class":57},[47,2111,88],{"class":53},[47,2113,2115,2117],{"class":49,"line":2114},81,[47,2116,1407],{"class":53},[47,2118,1431],{"class":57},[47,2120,2122,2124,2126],{"class":49,"line":2121},82,[47,2123,1436],{"class":61},[47,2125,65],{"class":53},[47,2127,1441],{"class":68},[47,2129,2131,2133,2135],{"class":49,"line":2130},83,[47,2132,1446],{"class":61},[47,2134,65],{"class":53},[47,2136,1451],{"class":68},[47,2138,2140,2142,2144],{"class":49,"line":2139},84,[47,2141,1456],{"class":61},[47,2143,65],{"class":53},[47,2145,1461],{"class":68},[47,2147,2149,2151,2153],{"class":49,"line":2148},85,[47,2150,1466],{"class":53},[47,2152,58],{"class":57},[47,2154,88],{"class":53},[47,2156,2158,2160,2162],{"class":49,"line":2157},86,[47,2159,1475],{"class":53},[47,2161,1331],{"class":57},[47,2163,88],{"class":53},[47,2165,2167,2169,2171,2173,2175,2177],{"class":49,"line":2166},87,[47,2168,1391],{"class":53},[47,2170,1331],{"class":57},[47,2172,62],{"class":61},[47,2174,65],{"class":53},[47,2176,1492],{"class":68},[47,2178,88],{"class":53},[47,2180,2182,2184,2186,2188,2190,2192,2194,2196,2199],{"class":49,"line":2181},88,[47,2183,1407],{"class":53},[47,2185,58],{"class":57},[47,2187,62],{"class":61},[47,2189,65],{"class":53},[47,2191,1507],{"class":68},[47,2193,1295],{"class":61},[47,2195,65],{"class":53},[47,2197,2198],{"class":68},"\"modal5\"",[47,2200,88],{"class":53},[47,2202,2204],{"class":49,"line":2203},89,[47,2205,2206],{"class":53},"          Open Modal 5\n",[47,2208,2210,2212,2214],{"class":49,"line":2209},90,[47,2211,1526],{"class":53},[47,2213,58],{"class":57},[47,2215,88],{"class":53},[47,2217,2219,2221,2223],{"class":49,"line":2218},91,[47,2220,1475],{"class":53},[47,2222,1331],{"class":57},[47,2224,88],{"class":53},[47,2226,2228,2230,2232],{"class":49,"line":2227},92,[47,2229,1543],{"class":53},[47,2231,1331],{"class":57},[47,2233,88],{"class":53},[47,2235,2237,2239,2241],{"class":49,"line":2236},93,[47,2238,1552],{"class":53},[47,2240,1331],{"class":57},[47,2242,88],{"class":53},[47,2244,2246,2248,2250],{"class":49,"line":2245},94,[47,2247,100],{"class":53},[47,2249,1331],{"class":57},[47,2251,88],{"class":53},[47,2253,2255],{"class":49,"line":2254},95,[47,2256,191],{"emptyLinePlaceholder":190},[47,2258,2260],{"class":49,"line":2259},96,[47,2261,2262],{"class":123},"\u003C!-- モーダル5 -->\n",[47,2264,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288],{"class":49,"line":2265},97,[47,2267,54],{"class":53},[47,2269,1331],{"class":57},[47,2271,62],{"class":61},[47,2273,65],{"class":53},[47,2275,85],{"class":68},[47,2277,1340],{"class":61},[47,2279,65],{"class":53},[47,2281,2198],{"class":68},[47,2283,1347],{"class":61},[47,2285,65],{"class":53},[47,2287,1352],{"class":68},[47,2289,88],{"class":53},[47,2291,2293,2295,2297,2299,2301,2303],{"class":49,"line":2292},98,[47,2294,1359],{"class":53},[47,2296,1331],{"class":57},[47,2298,62],{"class":61},[47,2300,65],{"class":53},[47,2302,1368],{"class":68},[47,2304,88],{"class":53},[47,2306,2308,2310,2312,2314,2316,2318],{"class":49,"line":2307},99,[47,2309,1375],{"class":53},[47,2311,1331],{"class":57},[47,2313,62],{"class":61},[47,2315,65],{"class":53},[47,2317,1384],{"class":68},[47,2319,88],{"class":53},[47,2321,2323,2325,2327,2329,2331,2333],{"class":49,"line":2322},100,[47,2324,1391],{"class":53},[47,2326,1331],{"class":57},[47,2328,62],{"class":61},[47,2330,65],{"class":53},[47,2332,1400],{"class":68},[47,2334,88],{"class":53},[47,2336,2338,2340,2342,2344,2346,2348,2351,2353],{"class":49,"line":2337},101,[47,2339,1407],{"class":53},[47,2341,1410],{"class":57},[47,2343,62],{"class":61},[47,2345,65],{"class":53},[47,2347,1417],{"class":68},[47,2349,2350],{"class":53},">Modal 5\u003C/",[47,2352,1410],{"class":57},[47,2354,88],{"class":53},[47,2356,2358,2360],{"class":49,"line":2357},102,[47,2359,1407],{"class":53},[47,2361,1431],{"class":57},[47,2363,2365,2367,2369],{"class":49,"line":2364},103,[47,2366,1436],{"class":61},[47,2368,65],{"class":53},[47,2370,1441],{"class":68},[47,2372,2374,2376,2378],{"class":49,"line":2373},104,[47,2375,1446],{"class":61},[47,2377,65],{"class":53},[47,2379,1451],{"class":68},[47,2381,2383,2385,2387],{"class":49,"line":2382},105,[47,2384,1456],{"class":61},[47,2386,65],{"class":53},[47,2388,1461],{"class":68},[47,2390,2392,2394,2396],{"class":49,"line":2391},106,[47,2393,1466],{"class":53},[47,2395,58],{"class":57},[47,2397,88],{"class":53},[47,2399,2401,2403,2405],{"class":49,"line":2400},107,[47,2402,1475],{"class":53},[47,2404,1331],{"class":57},[47,2406,88],{"class":53},[47,2408,2410,2412,2414,2416,2418,2420],{"class":49,"line":2409},108,[47,2411,1391],{"class":53},[47,2413,1331],{"class":57},[47,2415,62],{"class":61},[47,2417,65],{"class":53},[47,2419,1492],{"class":68},[47,2421,88],{"class":53},[47,2423,2425,2427,2429,2432,2434],{"class":49,"line":2424},109,[47,2426,1407],{"class":53},[47,2428,10],{"class":57},[47,2430,2431],{"class":53},">Last modal (5)\u003C/",[47,2433,10],{"class":57},[47,2435,88],{"class":53},[47,2437,2439,2441,2443],{"class":49,"line":2438},110,[47,2440,1475],{"class":53},[47,2442,1331],{"class":57},[47,2444,88],{"class":53},[47,2446,2448,2450,2452],{"class":49,"line":2447},111,[47,2449,1543],{"class":53},[47,2451,1331],{"class":57},[47,2453,88],{"class":53},[47,2455,2457,2459,2461],{"class":49,"line":2456},112,[47,2458,1552],{"class":53},[47,2460,1331],{"class":57},[47,2462,88],{"class":53},[47,2464,2466,2468,2470],{"class":49,"line":2465},113,[47,2467,100],{"class":53},[47,2469,1331],{"class":57},[47,2471,88],{"class":53},[10,2473,2474,2475,266,2477,2479],{},"モーダルからモーダルを開くたび、モーダルと ",[14,2476,265],{},[14,2478,269],{}," を調整することで層を形成している。",[38,2481,2485],{"className":2482,"code":2483,"language":2484,"meta":43,"style":43},"language-ascii shiki shiki-themes github-light","      _______________\n     /               /   Modal 4\n    / z-index:1070  /\n   /_______________/\n------ -index:1069 ----- Backdrop 4\n\n\n      _______________\n     /               /   Modal 3\n    / z-index:1060  /\n   /_______________/\n----- z-index:1059 ----- Backdrop 3\n\n\n      _______________\n     /               /    Modal 2\n    / z-index:1050  /\n   /_______________/\n------ z-index:1049 ----- Backdrop 2\n\n\n      _______________\n     /               /    Modal 1\n    / z-index:1040  /\n   /_______________/\n------ z-index:1039 ----- Backdrop 1\n","ascii",[14,2486,2487,2492,2497,2502,2507,2512,2516,2520,2524,2529,2534,2538,2543,2547,2551,2555,2560,2565,2569,2574,2578,2582,2586,2591,2596,2600],{"__ignoreMap":43},[47,2488,2489],{"class":49,"line":50},[47,2490,2491],{},"      _______________\n",[47,2493,2494],{"class":49,"line":91},[47,2495,2496],{},"     /               /   Modal 4\n",[47,2498,2499],{"class":49,"line":97},[47,2500,2501],{},"    / z-index:1070  /\n",[47,2503,2504],{"class":49,"line":163},[47,2505,2506],{},"   /_______________/\n",[47,2508,2509],{"class":49,"line":181},[47,2510,2511],{},"------ -index:1069 ----- Backdrop 4\n",[47,2513,2514],{"class":49,"line":187},[47,2515,191],{"emptyLinePlaceholder":190},[47,2517,2518],{"class":49,"line":194},[47,2519,191],{"emptyLinePlaceholder":190},[47,2521,2522],{"class":49,"line":213},[47,2523,2491],{},[47,2525,2526],{"class":49,"line":218},[47,2527,2528],{},"     /               /   Modal 3\n",[47,2530,2531],{"class":49,"line":457},[47,2532,2533],{},"    / z-index:1060  /\n",[47,2535,2536],{"class":49,"line":468},[47,2537,2506],{},[47,2539,2540],{"class":49,"line":473},[47,2541,2542],{},"----- z-index:1059 ----- Backdrop 3\n",[47,2544,2545],{"class":49,"line":482},[47,2546,191],{"emptyLinePlaceholder":190},[47,2548,2549],{"class":49,"line":491},[47,2550,191],{"emptyLinePlaceholder":190},[47,2552,2553],{"class":49,"line":500},[47,2554,2491],{},[47,2556,2557],{"class":49,"line":506},[47,2558,2559],{},"     /               /    Modal 2\n",[47,2561,2562],{"class":49,"line":511},[47,2563,2564],{},"    / z-index:1050  /\n",[47,2566,2567],{"class":49,"line":517},[47,2568,2506],{},[47,2570,2571],{"class":49,"line":523},[47,2572,2573],{},"------ z-index:1049 ----- Backdrop 2\n",[47,2575,2576],{"class":49,"line":529},[47,2577,191],{"emptyLinePlaceholder":190},[47,2579,2580],{"class":49,"line":535},[47,2581,191],{"emptyLinePlaceholder":190},[47,2583,2584],{"class":49,"line":541},[47,2585,2491],{},[47,2587,2588],{"class":49,"line":556},[47,2589,2590],{},"     /               /    Modal 1\n",[47,2592,2593],{"class":49,"line":576},[47,2594,2595],{},"    / z-index:1040  /\n",[47,2597,2598],{"class":49,"line":599},[47,2599,2506],{},[47,2601,2602],{"class":49,"line":623},[47,2603,2604],{},"------ z-index:1039 ----- Backdrop 1\n",[10,2606,2607],{},"モーダルを呼び出すボタンには",[2609,2610,2611,2618],"ul",{},[2612,2613,2614,2617],"li",{},[14,2615,2616],{},"show-modal"," クラス",[2612,2619,2620],{},[14,2621,2622],{},"data-show-modal=\"モーダルのID\"",[10,2624,2625],{},"をつける。 モーダル自体は通常の定義と変わらないため、使い心地にも違和感はない。",[38,2627,2629],{"className":40,"code":2628,"language":42,"meta":43,"style":43},"\u003Cbutton class=\"btn show-modal\" data-show-modal=\"modal1\">Open Modal 1\u003C/button>\n",[14,2630,2631],{"__ignoreMap":43},[47,2632,2633,2635,2637,2639,2641,2644,2646,2648,2650,2653,2655],{"class":49,"line":50},[47,2634,54],{"class":53},[47,2636,58],{"class":57},[47,2638,62],{"class":61},[47,2640,65],{"class":53},[47,2642,2643],{"class":68},"\"btn show-modal\"",[47,2645,1295],{"class":61},[47,2647,65],{"class":53},[47,2649,1300],{"class":68},[47,2651,2652],{"class":53},">Open Modal 1\u003C/",[47,2654,58],{"class":57},[47,2656,88],{"class":53},[2658,2659,2660],"h3",{"id":2660},"デモ",[10,2662,2663],{},"\u003Cvideo\nclass=\"rounded-xl border border-white/10\"\nautoplay\nmuted\nloop\nplaysinline\ncontrols",[2665,2666],"blockquote",{},[2668,2669],"source",{"src":2670,"type":2671},"/images/articles/bootstrap5-nested-modal/modal.webm","video/webm",[2668,2673],{"src":2674,"type":2675},"/images/articles/bootstrap5-nested-modal/modal.mp4","video/mp4",[2677,2678],"img",{"src":2679,"alt":2680},"/images/articles/bootstrap5-nested-modal/modal.gif","nested modal demo",[2682,2683,2684],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":43,"searchDepth":91,"depth":91,"links":2686},[2687,2688,2689],{"id":33,"depth":91,"text":33},{"id":244,"depth":91,"text":244},{"id":273,"depth":91,"text":273,"children":2690},[2691],{"id":2660,"depth":97,"text":2660},"2025-07-19T00:00:00.000Z","Bootstrap5では公式にサポートされていない入れ子モーダルを作る","md","tech",{},null,"/articles/bootstrap5-nested-model",{"title":5,"description":2693},{"loc":2698,"images":2701,"lastmod":2703},[2702],{"loc":2679},"2025-07-19","articles/bootstrap5-nested-model",[16,551,279,2706],"JavaScript","6VMypavp9iMuq3UoNz_iqzF085AhYgs7yrihXuTpKyo",[2709,2714],{"title":2710,"path":2711,"stem":2712,"date":2713,"children":-1},"Chromeでリロードをしてもコンソール・ネットワークログを保持する方法","/articles/chrome-log-setting","articles/chrome-log-setting","2025-08-07T00:00:00.000Z",{"title":2715,"path":2716,"stem":2717,"date":2718,"children":-1},"レビューは試験ではないことがわかってきた","/articles/review-is-not-exam","articles/review-is-not-exam","2025-07-14T00:00:00.000Z",1772952405479]