قسمت بیست و ششم bootstrap : نحوه ی ساخت مودال ( modal ) در بوت استرپ ۴

ساخت مودال ، صفحات باز شونده در بوت استرپ 4 ، یکی از مسائلی است که می توانید در قسمت های مختلف سایت از آن استفاده کنید .

صفحات بازشونده ، در قسمت های مختلف سایت مانند صفحات ورود ، جستجو و …. می توان از مودال ها استفاده کرد.

مودال چیست ؟

مودال با استفاده از یک دکمه در صفحه به نمایش در می آید ، با استفاده از مودال توان ساخت یک پاپ آپ را خواهید داشت.

چگونه یک مودال ساخته می شود ؟

با توجه به کد زیر ، شما توان ساخت یک مودال را خواهید داشت :

  Open modal




  

    


      
      

        
Modal Heading
        ×
      

      
      

        Modal body..
      

      
      

        Close
      

    
  

در قسمت اول ، شما دکمه ای برای باز شدن طراحی میکنید ، در قسمت دوم مودال را تعریف می کنید ، داخل مودال به سه قسمت سربرگ ، محتوا و پا ورقی قسیم می شود.

افزودن انیمیشن به مودال

با استفاده از کلاس .fade افکتی برای مودال خود قرار می دهید ، نمونه کدهای انیمیشن را به صورت زیر می توانید در نظر بگیرید :

سایز مودال

با توجه به قسمت های پیشین دوره رایگان بوت استرپ ، آشناییت با قسمت سایز ها دارید ، اما در کل برای تغییر سایز مودال به سایز خیلی بزرگ از کلاس .modal-xl برای سایز بزرگ از .modal-lg و برای سایز کوچک از .modal-sm به سبک زیر استفاده می شود:

در حالت کلی سایز مودال ها ، سایز متوسط است .

مودال در وسط صفحه :

در این حالت مودال شما در حالت عمودی و افقی در وسط صفحه قرار میگیرد ، برای این حالت کافی است از کلاس .modal-dialog-centered استفاده کنید :

مودال در حالت اسکرول

هنگامی که شما محتوای زیادی در حالت مودال خود قرار میدهید باید وضعیت برای اسکرول کردن نیز قرار دهید ، برای افزودن حالت اسکرول کافی است قطعه کد زیر را قرار دهید :

با این وجود ، می توان به جای خود صفحه ، با افزودن .modal-dialog-scrollable به .modal-dialog فقط به داخل صفحه پیمایش کرد:

از اینکه در این قسمت از اموزش های رایگان بوت استرپ همراه ما بودید بسیار خرسندیم ، پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

همچنین می توانید از سایر قسمت های دوره رایگان بوت استرپ 4 هم استفاده فرمایید.