hide شدن فرم در js

سلام عزیزم،

یجورایی درک مشکل و سوالت واسم سخت بود، حس میکنم میتونستی یه کوچولو واضح تر توضیح بدی اما اشکال نداره 😄
ادامه پاسخ رو بخون تا بتونی مشکلت رو برطرف کنی...

اتریبوت onclick رو به این صورت به دکمه ای که باید با کلیک شدنش فرایند نمایش و مخفی شدن فرم انجام بشه، اضافه کن:

<button onclick="switchVisibility()" >Ye Chizi</button>

و بعد توی قسمت js این فانکشن رو الصاق کن:

const switchVisibility = () => {
    const id = "id";
    const contentHolder = document.getElementById(id);
    if(!contentHolder) return;
    const isVisible = contentHolder.style.visibility === "visible" ? true : false;
    contentHolder.style.visibility = !isVisible;
};

بعد از الصاق فانکشن آیدی المنتی که میخوای مخفی بشه و یا به نمایش در بیاد رو به جای مقدار "id" در خط دوم بنویس. دقت کن که اگه المنتی با اون آیدی پیدا نشه فانکشن کار نمیکنه! دلیل استفاده از آیدی هم اطمینان حاصل کردن از یونیک بودنش هست.

امیدوارم که کمکی کرده باشم 😄

سلام مهدی جان شرمنده دیرشد شدیدا درگیر کارهای دانشگاه بودم این چیزی که گفتی تست کردم اما جواب نداد و با display اوکی شد نمیدونم چرا visibility جواب نمیده ضمن اینکه اون قسمت شرط که نوشتی هم متوجه نشدم
کد من

function switchVisibility(e) {
    var x = document.getElementById("form-login");

    if (x.style.display === "none") {
        x.style.display = "block";
        /*x.style.visibility = "hidden";*/
    } else {
        x.style.display = "none";
        x.style.WebkitTransition = 'ease-in 3s ';
        /*x.style.visibility = "!hidden";*/
    }
  } 

بخش دوم کدم قصد داشتم دکمه بازگشت در لاگین باکس طراحی کنم و کاربر بتونه روی بازگشت میزنه لاگین باکس بسته بشه تونستم انجام بدم ولی بلد نیستم چجوری با while بی نهایت اش کنم ؟

function close_loginitems(){
    var span = document.getElementById("form-login");
    span.remove();
}

بخش سوم هم قصد دارم زمانی که کاربر وارد لاگین باکس میشه اگر body کلیک کرد اسکرول فعال بشه در غیر این صورت overflow: hidden بشه

function look_overflow(){
    var body = document.getElementsByTagName(body)[1];
    var x = document.getElementById("form-login");

   while (i < 1000) {
      x.style.display = "none";
      body.style.overflow = "hidden";  
   }
}

لینک ویدیو نمونه
مشکلات :
قفل شدن اسکرول بعد از باز شدن لاگین
بستن لاگین باکس زمان کلیک کردن روی body
نوشتن حلقه while برای بستن فرم
و موارد دیگر ...

درود،

شرطی که نوشتم فقط میگفت که اگه ویزیبل هست هایدش کن، در غیر این صورت ویزیبل بشه.

متوجه نشدم چرا به یه حلقه نیاز داری؟
هر موقع روی ضربدر کلیک شد فانکشنی که این پنجره رو مبینده رو صدا کن😄

درمورد قفل شدن اسکرول مطمعن نیستم که مشکل از بادی باشه، چون اسکرول بار اونجا میمونه.
و به همین دلیل بعید میدونم تغییر پراپرتی overflow تغییری ایجاد کنه، اما اگه فکر میکنی این راه حلش هست، اول از همه توی inspect پراپرتی المنت مورد نظرت رو تغییر بده و ببین کار میکنه یا نه.
پس مشکل چیه؟ شاید با باز شدن پنجره. لاگین یه layer به صفحت اضافه میشه که جلوی ایونت اسکرول رو میگیره. منظورم المنتی هست که login-form توش قرار گرفته. یعنی نباید دیسپلی اون رو نان بزاری، بلکه دیسپلی المنت پدر رو 😅

واسه بستن لاگین هم روی کلیک روی صفحه دوتا راه داری:

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

سلام اصلا متوجه منظورت نمیشم از مدرس دوره سوال پرسیدم کدش به این شکل هست که میگی ولی مشکل اینه jquery من بلد نیستم و متوجه نمیشم اگه توی js pure کمک ام کنی ممنون میشم !

 $('#open-login-box').click(function() {
              $('.login').addClass('login-show');
              $('body').addClass('stop-scrolling');
          });

          $('#close-login-box').click(function() {
              $('.login').removeClass('login-show');
              $('body').removeClass('stop-scrolling');
          });

          $('.login').click(function(e){
            if(e.target !== this)
              return;

            $('.login').removeClass('login-show');
            $('body').removeClass('stop-scrolling');
          });

کد من

function switchVisibility() {
    var x = document.getElementById("form-login"); /* login box */
    const create = document.createElement("div");
    var body = document.getElementById('overflow-lock') /* body tag */

    create.classList.add("login-show");
    document.getElementById("form-login").appendChild(x);

    if (create.style.display === "none") {
        create.style.display = "block";
        /*x.style.visibility = "hidden";*/
    } else {
        create.style.display = "none";
        create.style.WebkitTransition = 'ease-in 3s '; 
        /*x.style.visibility = "!hidden";*/
    }
  } 
function close_loginitems(){
    var span = document.getElementsByClassName("login-show").remove();

}

الگوریتم نهای : همان طور که گفتی نیاز به یک div دارم که احتمالا display: flex باشه و کل صفحه باشه و همزمان اسکرول بار بسته بشه میدونم چیه ولی نمی تونم کدش بزنم 😧

سلام خسته نباشید
ببین مثل مدال میمونه به نظرم بتونی با استفاده از display بیای هاید کنی بهتر و راحت تر باشه

درود.

تبدیل کد جی کوئری به جی اس کار مشکلی نیست و حتی آنلاینم میشه انجامش داد اما این قطعه کد بالا با css هم در ارتباط هست و باید توی css پیش زمینه اش فراهم بشه.

به نظرم اگه یه کوچولو روی نکات مبتدی جی اس وقت بزاری خیلی راحت تر میتونی مشکلاتت رو برطرف کنی. چون اونطور که فکر میکنی پیچیده نیستن😉