我想使用弹出窗口来显示注册表单。为此,我使用了 jQuery Mobile 的弹出窗口。
因此,当我添加 jQuery 移动 CSS 和 JavaScript 时,它们会影响整个页面。所有的文本、菜单、链接和一切都被它改变了。
我如何限制 jQuery Mobile 样式和 JavaScript 仅在该弹出窗口上工作?
我已经完成了整个设计,所以我不能再一个一个地改变样式。
这是我的代码
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
这是我的 HTML
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Signup</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to Signup</h3>
<p>This action cannot be undone.</p>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
</div>
</div>
最佳答案
改变模式。请将移动 CSS 文件放在自定义 CSS 文件之前。将彻底改变它。
干杯!
关于javascript - 如何避免网站其他部分出现 jQuery 移动样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30028447/