如何避免网站其他部分出现 jQuery 移动样式？

Question

我想使用弹出窗口来显示注册表单。为此，我使用了 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>

Answer 1

改变图案。请将移动 CSS 文件放在您的自定义 CSS 文件之前。会彻底改变。

干杯！