jQuery переделывает всплывающее окно, добавляя хэштег href в URL

ProgramBox

jQuery переделывает всплывающее окно, добавляя хэштег href в URL

Post author:admin
Запись опубликована:6 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #hashtag #remodal

#javascript #jquery #HTML #хэштег #переделывает

Вопрос:

У меня есть фрагмент html, который в основном выглядит так:

 <a id="popap" style="display:none;" href="#modal">Call the modal with data-remodal-id="modal"</a>

И затем определение переделанного всплывающего окна выглядит следующим образом:

 <div class="remodal" style="width:60%" data-remodal-id="modal">
    <div style="width:100%; text-align:center;">
        <canvas class="canvas" height="160"></canvas>
    </div>
    <div class="hideit">
        <button data-remodal-action="close" class="remodal-close"></button>
        <div class="row">
            <div class="modalMainTitle">
                <i class="far fa-save fa-3x"></i>
                <h1>Add to search List</h1>
            </div>
            <p>
                Comment:
            </p>
            <textarea id="TextArea1" rows="2" cols="20"></textarea>
        </div>
        <div class="row" style="padding:0 41.64% ;">
            <p>Rating: </p>
            <fieldset class="rating" id="ratingSystem">
                <input type="radio" id="star5" name="rating" value="5" autocomplete="off" /><label class="full" for="star5" title="Awesome - 5 stars"></label>
                <input type="radio" id="star4" name="rating" value="4" autocomplete="off" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
                <input type="radio" id="star3" name="rating" value="3" autocomplete="off" /><label class="full" for="star3" title="Meh - 3 stars"></label>
                <input type="radio" id="star2" name="rating" value="2" autocomplete="off" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
                <input type="radio" id="star1" name="rating" value="1" autocomplete="off" /><label class="full" for="star1" title="Sucks big time - 1 star"></label>
            </fieldset>

        </div>
        <div class="row">
            <div class="col-lg-push-3 col-lg-6">
                <div id="infoError2" style="width:100%;text-align:center; margin-right:50px !important; padding-right:45px;" class="alert"></div>
            </div>

        </div>


        @* 0 - User watchlist //  *@
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel" id="cancelButton">Cancel</button>
        <button class="remodal-confirm btnSaveWatchlist">Save</button>
    </div>
</div>

И затем, как только я вызываю всплывающее окно, которое будет выполнено следующим образом:

  $(document).on("click", ".btnWatchList", function (e) {
            $("#popap")[0].click();
    });

Как только это событие завершено, я заметил, что оно добавляет #modal в URL, на котором я нахожусь (и я не хочу, чтобы это произошло).

После запуска события у меня есть URL, подобный следующему:

 example.com?Ids=12312312412amp;Date=30#modal

Но URL-адрес должен оставаться следующим:

 example.com?Ids=12312312412amp;Date=30

Могу ли я каким-либо образом предотвратить это (чтобы часть #modal не добавлялась к URL-адресу после появления всплывающего окна)?

1. Большинство модальных плагинов имеют открытый метод, которому не нужно использовать атрибут data

2. github.com/VodkaBears/Remodal#hashtracking — Не уверен, что это тот плагин, который вы используете, но, как сказал charlietfl, это должен быть доступный вариант.

3. Это можно сделать, и ниже есть ответ, который указывает на метод (но в настоящее время он неверен), но я должен спросить почему? Это нормальное поведение для ссылок с хэш-ссылками в них.

4. Я голосую за то, чтобы закрыть этот вопрос как не относящийся к теме, потому что нет соответствующего объяснения того, что на самом деле не так.

Ответ №1:

Извиняюсь за первый ответ, я неправильно прочитал вопрос и с тех пор удалил запись (Извиняюсь, новичок в этом, но пытаюсь улучшить 🙂 -).

event.preventDefault() может использоваться для предотвращения запуска метода. https://www.w3schools.com/jsref/event_preventdefault.asp

Это может быть прикреплено к вашему элементу привязки, чтобы предотвратить изменение href. Это будет выглядеть следующим образом:

 $('#popap').click(function(e){
     e.preventDefault();
}

Надеюсь, вышесказанное поможет и извиняется за первый ответ 🙂

Ответ №2:

вы также можете, как предложил @charlietfl, использовать метод, предоставленный вам библиотекой:

  <a data-remodal-target="modal" id="popap" style="display:none;" href="#">Call the modal with data-remodal-id="modal"</a>

1. Хорошо, я попробовал это и добавил: window. REMODAL_GLOBALS = { ПРОСТРАНСТВО ИМЕН: ‘modal’, ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ: { Отслеживание хэша: false } }; часть кода, как предложил TJBlackman… но не работает :/

2. Он по-прежнему добавляет #modal :/ meh