كيفية عمل بوب اب خاص

محمد عبدالله18 · 3 نوفمبر 2022

السلام عليكم ورحمة الله وبركاته كيف حالكم بعد اذن الادمن\ بستفسر لو عايز اعمل بوب اب مخصص يعني

مثلا عندما واحد يضغط على add to cart يظهر له بوب اب يطلب بياناته الخاصة بالهاتف والايميل

وكيف اخلي الهاتف يتم تحديده تلقائيا عن طريق تحديد الip الخاص به تلقائيا ؟؟؟

يعني يتحدد كود الدولة بناء على ذلك وبعد ان يضغط تسليم البيانات يعمله redirect لسلة الشراء

وهل ممكن ان اجعل البوب اب يظهر بعد 5 ثوان مثلا او اكثر يعني شخص يقوم يتصفح في الموقع يظهر البوب اب بعد مدة من الزمن الموقع ووردبريس

Ahmed Sadek Elamine Touahria · 3 نوفمبر 2022

تعد النماذج المنبثقة طريقة رائعة لإجراء حوارات على موقع الويب الخاص بك. يمكنك إنشاء نماذج تسجيل دخول منبثقة أو نماذج اتصال أو أي نوع آخر من النماذج لموقعك. سيكون الزر المنبثق تحت أعين الزائر مباشرة. عندما ينقر المستخدم على الزر المنبثق ، سيظهر النموذج على الشاشة.

هنا يمكنك معرفة كيفية إنشاء نموذج منبثق باستخدام JavaScript.

استخدم display = "block" لـ openForm () و display = "none" لوظائف closeForm () لإظهار وإغلاق النموذج عند النقر فوقه:

function openTheForm() {
  document.getElementById("popupForm").style.display = "block";
}

function closeTheForm() {
  document.getElementById("popupForm").style.display = "none";
}

مثال على نموذج منبثق باستخدام JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>نافذة منبثقة</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .openBtn {
        display: flex;
        justify-content: left;
      }
      .openButton {
        border: none;
        border-radius: 5px;
        background-color: #1c87c9;
        color: white;
        padding: 14px 20px;
        cursor: pointer;
        position: fixed;
      }
      .loginPopup {
        position: relative;
        text-align: center;
        width: 100%;
      }
      .formPopup {
        display: none;
        position: fixed;
        left: 45%;
        top: 5%;
        transform: translate(-50%, 5%);
        border: 3px solid #999999;
        z-index: 9;
      }
      .formContainer {
        max-width: 300px;
        padding: 20px;
        background-color: #fff;
      }
      .formContainer input[type=text],
      .formContainer input[type=password] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 20px 0;
        border: none;
        background: #eee;
      }
      .formContainer input[type=text]:focus,
      .formContainer input[type=password]:focus {
        background-color: #ddd;
        outline: none;
      }
      .formContainer .btn {
        padding: 12px 20px;
        border: none;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        width: 100%;
        margin-bottom: 15px;
        opacity: 0.8;
      }
      .formContainer .cancel {
        background-color: #cc0000;
      }
      .formContainer .btn:hover,
      .openButton:hover {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <h2>نموذج تسجيل دخول</h2>
    <p>انقر فوق الزر "فتح النموذج" لفتح النموذج المنبثق.</p>
    <div class="openBtn">
      <button class="openButton" onclick="openForm()"><strong>Open Form</strong></button>
    </div>
    <div class="loginPopup">
      <div class="formPopup" id="popupForm">
        <form action="/action_page.php" class="formContainer">
          <h2>الرجاء تسجيل الدخول</h2>
          <label for="email">
            <strong>البريد</strong>
          </label>
          <input type="text" id="email" placeholder="Your Email" name="email" required>
          <label for="psw">
            <strong>كلمة السر</strong>
          </label>
          <input type="password" id="psw" placeholder="Your Password" name="psw" required>
          <button type="submit" class="btn">دخول</button>
          <button type="button" class="btn cancel" onclick="closeForm()">إلغاء</button>
        </form>
      </div>
    </div>
    <script>
      function openForm() {
        document.getElementById("popupForm").style.display = "block";
      }
      function closeForm() {
        document.getElementById("popupForm").style.display = "none";
      }
    </script>
  </body>
</html>

كيفية عمل بوب اب خاص

السؤال

محمد عبدالله18

1 جواب على هذا السؤال

Recommended Posts

Ahmed Sadek Elamine Touahria

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية