１ページに複数のモーダル

1ページに複数のモーダル

1ページに複数のモダールを実装するには、dialogタグに id="modal1"を書き、buttonのopenの方にdata-modal-target="modal1"を指定する必要がある。

app/views/companies/search.html.erb

<%# 1つ目モーダル　%>
<div data-controller="modal">
 <dialog id="modal1" data-modal-target="dialog" class="bg-[#f7f8fb] p-8 rounded-lg m-auto backdrop:bg-black/80">


<button type="button" data-action="modal#close"   class=" mt-5 px-4 py-1 bg-white text-[#143993] font-bold text-sm  border-2 rounded-full">
          この条件を追加する
        </button>
        
      
    </div>
  </dialog>

  <button data-action="modal#open" data-modal-target="modal1"class="   text-base ">所在地を選択</button>


<%#　 2つ目モーダル　%>
 <div data-controller="modal">
  <dialog id="modal2" data-modal-target="dialog" class="bg-[#f7f8fb] p-8 rounded-lg m-auto backdrop:bg-black/80">


<button type="button" data-action="modal#close"   class=" mt-5 px-4 py-1 bg-white text-[#143993] font-bold text-sm  border-2 rounded-full">
          この条件を追加する
        </button>
       
  </dialog>

  

  <button data-action="modal#open" data-modal-target="modal2" class="   text-base ">業種を選択</button>
</div>