Remove #&ui-state=dialog from URL in Jquery Mobile When Popup Opens

Simple, you can add a data-history=”false” attribute to your popup. By doing so, it will not appear in URL nor saved in history.

<!DOCTYPE html>
<html>
<head>
	<title>Remove #&ui-state=dialog from URL</title>
	<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>


<a href="#testpopup" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn">Popup</a>

<div data-role="popup" data-history="false" id="testpopup" data-overlay-theme="b" data-theme="b" data-dismissible="true">
	<a href="#aftercopypopup" data-relation="close" class="ui-icon-delete ui-btn-right ui-btn-icon-notext">Close</a>
	<div data-role="header" data-theme="a"><h3 id="popup-title" style="margin:0px 10%;">Popup Header</h3></div>
	<div role="main" class="ui-content">
		<p align="center">Remove #&ui-state=dialog from url</p>
	</div>
</div>

</body>
</html>

Leave a Comment