نمایش فرم مودال (modal) بوت استرپی توسط جی کویری

مشخصات سوال کننده :

کاربر : hamid_b امتیاز کاربر : 518 رتبه کاربر : 4

دسته بندی : Html Css جاوا اسکریپت بوت استرپ

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 2734

هوش مصنوعی

پاسخ هوش مصنوعی

برای نمایش یک فرم مودال با استفاده از بوت استرپ و جی کویری، شما می توانید از کد زیر استفاده کنید. ابتدا شما باید بوت استرپ و جی کویری را در صفحه خود بارگذاری کنید. سپس می توانید از HTML و کلاس های بوت استرپ برای طراحی مودال استفاده کنید.

در زیر مثالی از کد HTML و جی کویری آورده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Modal Example</title>
</head>
<body>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        نمایش فرم مودال
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">فرم مودال</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">ایمیل</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">رمز عبور</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
              </div>
              <button type="submit" class="btn btn-primary">ارسال</button>
            </form>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : saedbfd 23:23 1401/06/03

یک مثال ساده براتون مینویسم می تونید از همین مثال نمونه های پیچیده تر رو هم بسازید.

در دستورات Html پایین دو بخش داریم. اول بخش maincontent که محتویات View صفحه یا view شما هست. این بخش رو کاربر به صورت عادی میتونه ببینه. در ادامه یک div با id برابر با myModal داریم که کلاسهای modal و fade رو داره. کلاس modal باعث میشه این div دیده نشه.

<div id="maincontent">
   ...
   <button onclick='showmodal'>Show Modal</button>
</div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Title</h5>
            </div>
            <form>
                <div class="modal-body">
                   
                </div>
            </form>
        </div>
    </div>
</div>

حالا برای اینکه این modal رو نمایش بدیم کافیه توسط دستور جی کویری عبارت زیر رو بنویسیم.

<script>
   $('showmodal').on('click', function(){
      $("#myModal").modal('show');
   });
</script>

توسط متد modal و عبارت show میتونید فرم رو به صورت modal نمایش بدید.

به این پاسخ امتیاز بدهید 1

امتیاز: 1664 رتبه: 1

نظر ویرایش گزارش

1 نظر

mshosseini : در بوت استرپ 5 تنها راه نمایش مودال با جی کوئری هست ؟

امتیاز کاربر : 33 رتبه کاربر : 23 تاریخ ثبت : 08:11 1401/06/05

حذف

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

نمایش فرم مودال (modal) بوت استرپی توسط جی کویری

پاسخ هوش مصنوعی

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین