نمایش فرم مودال (Pop up) در بلیزر چگونه است ؟

نمایش فرم مودال (Pop up) در بلیزر چگونه است ؟

برای نمایش فرم های Modal یا Pop up یک مثال براتون مینویسم. شما میتونید از کتابخانه Bulma برای نمایش فرم های Modal استفاده کنید. بنابراین سایت Bulma.io رو باز کنید. خب حالا به قسمت Modal برید. در این قسمت انواع و اقسام کدها برای نمایش فرم Modal وجود داره.

خب حالا در ویژوال استودیو یک Component به نام DialogComponent.razor ایجاد کنید. و کدهای زیر رو درون این کامپوننت پیست کنید. این کدها از همون لینک که در بالا برای Modal معرفی شد انتخاب شده. البته کدهای سی شارپ رو خودمون نوشتیم.

@if (display)
{
 <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close" @onclick="(() => {
                                                                    close();
                                                                  })"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
}

@code
{
   private bool display = false;

   public void show()
   {
      this.display = true;
      StateHasChanged();
   }
  
   public void close()
   {
      this.display = false;
      StateHasChanged();
   }
}

خب حالا باید از این کامپوننت در یک جا استفاده بشه. بنابراین یک razor page به نام mymodal.razor ایجاد می کنیم و کدهای زیر رو می نویسیم. در واقع در این کدها کامپوننت بالا رو صدا زدیم.

@page "/mymodal"

<button class="btn btn-primary" @onclick="(() => {
                                                   dialog.show();
                                                 })">Show Modal</button>
<DialogComponent @ref="dialog"></DialogComponent>

@code{
   private DialogComponent dialog;
   
}

خب حالا اگر پروژه رو اجرا کنید و روی دکمه Show Modal کلیک کنید باید فرم مودال برای شما نمایش داده بشه.