jQuery remodal 弹出窗口将主题标签 href 添加到 url



我有一段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();
    });

此事件完成后,我注意到它会在我所在的 URL 中添加一个 #modal(我不希望这种情况发生(。

触发事件后,我有一个如下所示的 url:

example.com?Ids=12312312412&Date=30#modal

但是网址应该保持如下:

example.com?Ids=12312312412&Date=30

有什么方法可以防止这种情况发生(这样一旦弹出窗口出现,#modal 部分就不会添加到 url 中(?

对第一个答案表示歉意,我误读了这个问题,此后删除了该条目(抱歉,这是新手,但试图改进:) -(。

event.preventDefault(( 可用于防止方法触发。 https://www.w3schools.com/jsref/event_preventdefault.asp

这可以附加到锚元素以防止 href 被修改。这将如下所示:

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

希望以上对第一个答案有所帮助和道歉:)

您也可以按照

@charlietfl的建议使用库给您的方法:

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

最新更新