Question

我在小提琴中找到了一个简单的工具提示：http://jsfiddle.net/6L9j0v5y/1并尝试在本地使用它，但出了点问题。我也复制了http://jsfiddle.net/6L9j0v5y/1/show帧源，但效果相同（页面上只有按钮，单击时没有任何反应）。

我创建文件（通过复制）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <style type="text/css">
        [data-style=mypops] + .popover {
        background: #4194ca;
        }
        [data-style=mypops] + .popover.bottom .arrow:after {
            border-bottom-color: #4194ca;
        }
        [data-style=mypops] + .popover-content {
        }
        .popovermenu {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .popovermenu li {
        }
        .popovermenu li a {
            color: #fff;
        }
    </style>
    <title></title>
    <script type='text/javascript'>//<![CDATA[
        $(window).load(function(){
        $("#Pops").popover({
            html: true,
            content: function () {
                return $('#popover-content').html();
            }
        });
        });//]]> 
    </script>
</head>

<body>
  <br>
<br>
<br>
<div class="col-sm-4">
    <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button>
    <div id="popover-content" class="hide">
        <ul class="popovermenu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Separated link</a>

            </li>
        </ul>
    </div>
</div>

  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "6L9j0v5y"
    }], "*")
  }
</script>
</body>
</html>

控制台没有错误，怎么可能检查它为什么不起作用？

Answer 1

这是因为在本地环境中，它将资源URL视为本地文件，因为它在URL前面没有http / https协议。 / p>

这样做并没有错误，在服务器上它可以正常工作 ，但在本地它会导致问题。将脚本更改为以下内容，它可以正常工作。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

来自小提琴的代码在本地不起作用

1 个答案: