bootstrap 弹出框（Popover）与 jQuery Mobile 弹框css覆盖问题（已解决）

最新推荐文章于 2023-02-16 17:55:30 发布

不懂的浪漫

最新推荐文章于 2023-02-16 17:55:30 发布

阅读量444

点赞数

本文链接：https://blog.csdn.net/xiewenfeng520/article/details/103815098

版权

项目问题专栏收录该内容

34 篇文章 0 订阅

订阅专栏

文章目录

问题描述

手机端使用 bootstrap 弹出框（Popover）插件，一直使用正常，近期引入了 jQuery Mobile 框架实现一些效果，发现 Chrome 浏览器弹出框正常，但是手机上显示会变成透明状。

用了多种 js 事件控制和 css 去重新覆盖都没有效果，但是删除掉 1.4.5/jquery.mobile-1.4.5.min.css的引用就恢复正常，应该是在真实的手机上会触发某种事件不得而知。

解决方案

使用 jQuery Mobile 中类似的控件代替即可。

比如 bootstrap 弹出框（Popover）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VHofXBfp-1578015709415)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200103093816335.png)]$

jQuery Mobile

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ADeelAMK-1578015709417)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images)]$

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击按钮打开一个带方向边框的弹窗。</p>
    <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">左边</a>
    <a href="#myPop2" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">顶部</a>
    <a href="#myPop3" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">右边</a>
    <a href="#myPop4" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">底部</a>
    
    <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l">
      <p>在左边框有个方向。</p>
    </div>
    <div data-role="popup" id="myPop2" class="ui-content" data-arrow="t">
      <p>在顶部边框有个方向。</p>
    </div>
    <div data-role="popup" id="myPop3" class="ui-content" data-arrow="r">
      <p>在右边框有个方向。</p>
    </div>
    <div data-role="popup" id="myPop4" class="ui-content" data-arrow="b">
      <p>在底部边框有个方向。</p>
    </div>

    <p>这是一个段落，用于实例展示。弹窗显示在 <span id="demo" style="color:red;">这里</span>。</p>
  </div>
  <div data-role="footer">

    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>