如何才能让人们点击图片并复制我的GIthubPage中的相关代码？

Question

点击一张图片，弹出一个方框，复制相关代码？

Wolfram的参考网站有这个功能，我如何在我的Github页面中实现它？或者其他类似的东西？( JS代码？)

有没有人的主页，主题？

http://reference.wolfram.com/mathematica/ref/Part.html

​

​

Answer 1

你可以看到我描述的结果

这个效果完全可以在没有javascript的情况下实现，使代码变得非常简单。

我们必须将图像和代码包装在一个容器中，这样我们才能知道哪个容器放在哪里。我建议使用<figure>元素，因为正是出于这个原因，这些元素才是thought。然后，我们可以将代码示例、解释和其他内容包装在一个漂亮的<figcaption>元素中。

我想说代码示例应该在<textarea>中，因为在那里它已经预先格式化，具有等宽字体，最重要的是可以完全选择使用strg+a复制

因此，我们有以下结构：

<figure>
    <img />
    <figcaption>
        <textarea />
    </figcaption>
</figure>

然后我们可以用CSS隐藏<figcaption>，这样在默认情况下它是不可见的。

figure figcaption {
    display: none;
}

现在，我们如何让它可见呢？有一个叫做tabindex的整洁的，未被充分利用的特性，它允许我们通过键盘或鼠标使单个html元素成为“可聚焦的”。通过将tabindex设置为0，元素将被插入到页面的正常选项卡流中。通过将tabindex设置为-1，该项可以单击，但不能通过键盘聚焦。

因此，我们将所有图元素的tabindex设置为-1：

<figure tabindex="-1">
</figure>

现在，通过单击图像，您可以使整个figure元素获得焦点。我们可以使用它来显示带有CSS的框：

figure:focus figcaption {
    display: block;
}

这几乎就是我们想要的，只是一旦我们点击<textarea>，它就会获得焦点，然后它又消失了，因为一次只能有一个项目被聚焦到页面上。

因此，我们可以添加下面这段CSS，当我们悬停它时，它会一直向我们显示图形标题：

figure figcaption:hover {
    display: block;
}

默认情况下，在某些浏览器中，焦点元素会得到一个轮廓。在你的情况下，这可能是丑陋的，所以我们可以用CSS全局关闭它：

*:focus {
    outline: none;
}

然后，您只需按照您希望的样式设置项的样式，并对其进行定位，就完成了。

我构建了一个小的example，您可以在其中看到实际的代码。就去看看吧。图片只是来自Lorem Pixel的样例图片，代码样例来自ruby主页。

下面是我的例子的代码(只有一点样式，所以你也可以看到一个例子)：

HTML

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some sample code, maybe with some explanation:
        <textarea>
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some other code smaple, maybe with some explaination:
        <textarea>
# Output "I love Ruby"
say = "I love Ruby"
puts say

# Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase

# Output "I *love* Ruby"
# five times
5.times { puts say }

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

CSS

/**
 * Example for images with copyable code sample on click
 */
*:focus {
    outline: none;
}

figure {
    box-sizing: border-box;
    width: 440px;
    height: 250px;
    padding: 20px;
    display: inline-block;
    margin: 20px;
    border: 1px solid #333;
    color: #333;
    background-color: #ccc;
    position: relative;
    z-index: 1;
}

figure figcaption {
    box-sizing: border-box;
    border: 1px solid #333;
    background-color: white;
    position: absolute;
    top: 70px;
    left: 0; 
    display: none;
    z-index: 2;
    width: 440px;
    padding: 10px;
}

figure figcaption textarea {
    width: 400px;
    min-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure:focus figcaption {
    display: block;
}

figure figcaption:hover {
    display: block;
}

Answer 2

这就是我@HyperGroups所做的。但这只是一个示例，您可以根据自己的情况进行修改。尤其是课文，你会展示什么。我建议使用AJAX。

我使用jquery对话框弹出窗口。以及用于接收参数的函数。

HTML

<div id="popup"></div> ....

jQuery

function show_popup(particular_id){....

CSS

img{ display: inline-b...

Open this fiddle查看结果。