كيفية إغلاق مشروط دون الحاجة إلى تحديث الصفحة

Question

لدي صفحة ينبثق فيها النموذج، ولكن عندما أنقر لإغلاقه، يتم تحديث الصفحة، ولا أريد أن يحدث ذلك.

http://dev.ikov.org/store/index.php

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

يمكن لأي شخص الرجاء المساعدة؟

   .modalDialog2 {
    position: fixed!important;
    font-family: Arial, Helvetica, sans-serif;
    top: 0!important;
    right: 0!important;
    bottom: 0!important;
    left: 0!important;
    background: #000!important;
    z-index: 999!important;
    opacity:0!important;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.modalDialog2:target {
    opacity: 1!important;
    display: block!important;
}

.modalDialog2 > div {
    width: 672px;
    position: fixed;
    margin: 5% auto!important;
    background: #fff;
    z-index: 9999!important;
}

وهنا هو رمز HTML

                                <div id="ags" class="modalDialog2">
                                <div id="storeboxitem">
                                <div id="storeboxlight">
                                    <a href="" title="Close" class="close" onclick="returnIndex()">Browse Other Weapons</a>
                                <div id="storeboxheader">
                                    Armadyl GodSword
                                </div>
                                <div id="storeboxtext">
                                    Purchase this very powerful godsword for maximum destruction<br/>
                                    when killing other players in our minigames or PvP Areas. <br/>
                                    The recorded max hit of this sword is 84 (840).<br/>
                                    <img class="storeitemimg" src="storeimgs/playerags.png" width="100px" height="310x" />
                                    <img class="storeitemimg" src="storeimgs/agstable.png" width="150px" height="310x" />
                                    <input class="itemstextbox" type="text" name="username" value="Choose an amount" onfocus="blank(this)" onblur="unblank(this)"><button class="itemsbutton" type="button" onclick="">Buy This Item for 75 Tokens Each</button><br />
                                </div>
                            </div>
                            </div>
                            </div>

Answer 1

يبدو أن الوسائط الخاصة بك تعمل من خلال الاستفادة من استخدام # شظية.لذلك عندما يكون عنوان URL للصفحة #ags, ، تم ضبط المشروط على العرض.

ما تريد القيام به هو بدلاً من ربط زر الإغلاق بالصفحة (وهو في الواقع تحميل صفحة جديدة)، فأنت تريد الارتباط بقسم من الصفحة الذي ليس كذلك مرساة جزء التجزئة المشروط.

أسهل طريقة للقيام بذلك هي الارتباط بـ لا يوجد قسم على الإطلاق:قم بإنشاء رابط الربط الخاص بك لشيء مثل هذا:

http://dev.ikov.org/store/index.php#

المحتوى الفارغ بعد # الرمز يعني أن المتصفح يجب أن ينتقل إلى أعلى الصفحة دون إعادة تحميله.على نحو فعال، يؤدي هذا إلى إغلاق النموذج وإبقاء الصفحة الحالية مفتوحة.

Answer 2

"استعراض الأسلحة الأخرى" هو مرساة عنصر (<a>) مع فارغة HREF.على المواصفات (RFC 2396) الدول "URI المرجعية التي لا تحتوي على URI هو إشارة إلى المستند الحالي."

وبعبارة أخرى, لأنه يحتوي على السمة href, ولكن لا شيء تعيين المتصفح يحدد href إلى http://dev.ikov.org/store/index.php, مما يتسبب التحديث.

ما سوف تحتاج إلى القيام به هو تحديث onclick معالج لمنع الإجراء الافتراضي (الدعوة e.preventDefault()).سيؤدي هذا إلى إيقاف المتصفح من الواقع التنقل إلى الصفحة مرة أخرى (أو التحديث).