Question

我甚至不确定它是如何被召唤的。我想它不是一个模态对话框。

我正在寻找像他们在freelancer.com上的东西：

但我对他们的代码一无所知 -

<span class="SiteStats-item-name-icon Icon Icon--small"><svg class="Icon-image" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2C6.486 2 2 6.487 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.513-4.486-10-10-10zm0 16.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25zm1-4.375V15h-2v-3h1c1.104 0 2-.897 2-2 0-1.104-.896-2-2-2s-2 .896-2 2H8c0-2.205 1.795-4 4-4s4 1.795 4 4c0 1.86-1.277 3.43-3 3.875z"></path>
</svg>
</span>

如果盒子的尖端与＆＃34;？＆＃34;对齐，那将会更好。图标。

它应与触摸屏设备兼容，并在点击X或用户点击框外时关闭。

我想网上有一些现成的脚本可以做到这一点。有谁知道吗？或者发布一个我可以使用的明确代码？

Answer 1

以下是使用jQuery UI改进的https://www.freelancer.com/显示的框架可以完成的示例：

工作示例：https://jsfiddle.net/Twisty/w7ecbd0q/

<强> HTML

<div class="SiteStats-item site-stat">
  <div id="posted-listings" data-toggle="popover" data-placement="bottom" data-content="Jobs Posted (Filtered) is defined as the sum of Total Posted Projects and Total Posted Contests, filtered for spam, advertising, test projects, unawardable or otherwise projects that are deemed bad and unable to be fulfilled."
  class="SiteStats-item-name">
    <span class="SiteStats-item-name-text">Total Jobs Posted</span>
    <span class="SiteStats-item-name-icon Icon Icon--small">
      <svg class="Icon-image" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 2C6.486 2 2 6.487 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.513-4.486-10-10-10zm0 16.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25zm1-4.375V15h-2v-3h1c1.104 0 2-.897 2-2 0-1.104-.896-2-2-2s-2 .896-2 2H8c0-2.205 1.795-4 4-4s4 1.795 4 4c0 1.86-1.277 3.43-3 3.875z"/>
      </svg>
    </span>
  </div>
</div>

<强> CSS

body {
  background: #1f2836 none repeat scroll 0 0;
  text-align: center;
  color: #f7f7f7;
  margin: 20px 0;
  min-height: 1px;
  padding-left: 12px;
  padding-right: 12px;
  position: relative;
}

.SiteStats-item-name {
  font-size: 0.75rem;
  letter-spacing: 1px;
  line-height: 1.33;
  text-align: left;
  text-transform: uppercase;
}

.Icon {
  fill: #75787d;
}

.Callout {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 4px;
  box-sizing: border-box;
  color: #1f2836;
  display: none;
  max-width: 500px;
  padding: 36px 24px 24px;
  position: absolute;
  right: 20px;
  z-index: 1030;
}

.Callout-arrow {
  color: #75787d;
  opacity: 1;
  border-bottom: 8px solid currentcolor;
  border-left: 8px solid rgba(0, 0, 0, 0);
  border-right: 8px solid rgba(0, 0, 0, 0);
  bottom: 100%;
  color: #ffffff;
  left: 50%;
  margin-left: -8px;
  position: absolute;
}

.Callout-close {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 0 none;
  color: currentcolor;
  cursor: pointer;
  line-height: 0;
  outline: 0 none;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 12px;
}

.Callout-content {
  font-size: 0.875rem;
  line-height: 1.43;
}

<强>的jQuery

$(function() {
  $(".SiteStats-item-name-icon").click(function(e) {
    console.log("Create Call Out.");
    var tip = $(this).parent().data("content");
    var dialog = $("<div>", {
      id: "callout-posted-listings",
      class: "Callout is-Callout-active"
    });
    var content = $("<div>", {
      class: "Callout-content"
    }).html(tip);
    var arrow = $("<div>", {
      id: "callout-posted-listings-arrow",
      class: "Callout-arrow"
    });
    var closeButton = $("<button>", {
        id: "callout-posted-listings-close",
        class: "Callout-close"
      })
      .html('<span class="Callout-close-icon Icon Icon--small">     <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="Icon-image"><path d="M20.707 4.707l-1.414-1.414L12 10.586 4.707 3.293 3.293 4.707 10.586 12l-7.293 7.293 1.414 1.414L12 13.414l7.293 7.293 1.414-1.414L13.414 12"/></svg></span>')
      .click(function() {
        dialog.hide();
        dialog.remove();
      });
    dialog.append(arrow).append(closeButton).append(content);
    $("body").append(dialog);
    dialog.position({
      my: "center top",
      at: "center " + $(this).parent().data("placement"),
      of: $(this),
      collision: "fit"
    }).show();
    arrow.position({
      my: "center top",
      at: "center bottom",
      of: $(this)
    })
  });
});

我们在这里没有使用工具提示或对话，但我们正在模仿两者中的元素。我们希望在用户点击特定图标时动态显示提示。当您悬停时会出现工具提示，我们也可以这样做。对话框通常出现在点击事件中，并通过按钮或按ESC键关闭。

我们需要4个元素，div包含箭头（使用框边框技术），关闭button和内容div。内容与父项一起存储data-content属性。我们还可以发现一些定位数据。

我们创建了4个元素，分配了唯一的ID以及我们需要的任何类。 CSS有助于隐藏所有内容，因此我们也可以将它们构建为静态元素。

到目前为止，一切都是正常的jQuery。当我们开始显示所有内容时，我们可以利用jQuery UI的强大.position()功能see more。

我们将伪对话框和箭头显示在它们之后。普雷斯托！干净地放置在我们想要的位置，箭头也会调整到适合我们点击的元素。

这可以包含在一个整洁的功能中，并在我们点击几乎任何类似类型的图标时调用。它是动态创建的。你能用ToolTips做到这一点吗？是。你能用Dialog做到吗？是。但为什么？这样可以使用更少的代码，并且由于您生成了元素，因此更容易为自己的网站设置样式。

希望能解决你的问题。

可点击的工具提示与关闭按钮

1 个答案: