[英]jQuery remodal popup adding hashtag href to 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(我不希望這樣)。
事件觸發后,我將獲得如下網址:
example.com?Ids=12312312412&Date=30#modal
但網址應保持如下所示:
example.com?Ids=12312312412&Date=30
有什么辦法可以防止這種情況的發生(這樣,一旦彈出窗口出現,就不會將#modal部分添加到url中)?
您也可以按照@charlietfl建議使用庫提供的方法:
<a data-remodal-target="modal" id="popap" style="display:none;" href="#">Call the modal with data-remodal-id="modal"</a>
抱歉,第一個答案是我誤解了問題,因此刪除了該條目(抱歉,這是新問題,但嘗試改進:)-)。
event.preventDefault()可用於防止方法觸發。 https://www.w3schools.com/jsref/event_preventdefault.asp
可以將其附加到您的錨元素上,以防止對href進行修改。 如下所示:
$('#popap').click(function(e){
e.preventDefault();
}
希望以上對第一個答案的幫助和歉意:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.