带有等式的 HTML 弹出窗口答案

【问题标题】：HTML popup window with equation带有等式的 HTML 弹出窗口
【发布时间】：2021-04-02 16:30:02
【问题描述】：

我正在学习 HTML、CSS 和 Javascript，我是 3 天前开始学习的，所以不要指望这里有专家。我有以下 MWE：

<!DOCTYPE html>
<html>

<head>
    <title>References with popup windows</title>
    
    <meta charset="utf-8">
    <!-- Support for math --------------------------------------------------------------------------------------------------------->
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script type="text/x-mathjax-config">                                                                                         
        MathJax.Hub.Config({                                                                                                      
            tex2jax: {                                                                                                            
              inlineMath: [ ['$','$'], ["\\(","\\)"] ],                                                                           
              processEscapes: true                                                                                                
            }                                                                                                                     
        });                                                                                                                       
    </script>
    <!----------------------------------------------------------------------------------------------------------------------------->
    <style>
    .equation {
        display: table;
        width: 100%;
    }
    .equation__content, .equation__number {
        display: table-cell;
    }
    .equation__content {
        width: 90%;
    }
    .equation__number {
        text-align: right;
        font-family: serif;
    }
    </style>
</head>

<body>
    <div class="equation">
        <equation id="my first equation" class="equation__content">
            $$f(x) = 5x^2$$
        </equation>
        <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
    </div>
    <p>See equation <a class="cross-reference-link" href="#my first equation" onmouseover="popup(my_first_equation)">(1)</a>.</p>
    
</body>

</html>

正如您在<p> 标记内的文本中看到的那样，我创建了一个对等式的可点击引用，这很好。现在我希望当鼠标悬停在引用上时，引用的方程会显示在一个小框中，如下所示：

我已经阅读了很多关于如何做类似事情的教程和说明，但它们都只显示一个简单的弹出文本。在这里，我想显示一个已经在页面中呈现的“更复杂的对象”。我认为这类似于维基百科的参考资料。

我该怎么做？

【问题讨论】：

只需使用与普通文本工具提示相同的逻辑，但不使用文本，而是将公式相关代码复制到那里。这应该足够了。
是的，我有一些正在部分工作的东西。但是我必须再次复制方程式。是否有可能以某种方式告诉弹出窗口在其他地方显示 id 中的任何内容？这个我真的不知道该怎么做。
甚至 wikipedia 稍后使用 javascript 将工具提示添加到 dom，所以我认为没有办法告诉弹出窗口显示其他元素。因为最后的弹出窗口，是 HTML 代码只是使用 CSS 设置样式的。

标签： javascript html css popup

【解决方案1】：

最后我在this question 和this tutorial 之后设法解决了这个问题。这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <title>References with popup windows</title>
    
    <meta charset="utf-8">
    <!-- Support for math --------------------------------------------------------------------------------------------------------->
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script type="text/x-mathjax-config">                                                                                         
        MathJax.Hub.Config({                                                                                                      
            tex2jax: {                                                                                                            
              inlineMath: [ ['$','$'], ["\\(","\\)"] ],                                                                           
              processEscapes: true                                                                                                
            }                                                                                                                     
        });                                                                                                                       
    </script>
    <!----------------------------------------------------------------------------------------------------------------------------->
    <style>
    .equation {
        display: table;
        width: 100%;
    }
    .equation__content, .equation__number {
        display: table-cell;
    }
    .equation__content {
        width: 90%;
    }
    .equation__number {
        text-align: right;
        font-family: serif;
    }
    </style>
    <style>
        .popup_cross_reference {position:relative; }
        .popup_cross_reference span {display: none;}
        .popup_cross_reference_hover {position:relative;}
        .popup_cross_reference_hover span {
            display: block;
    position: absolute;
    background-color: White;
    z-index:1000;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
    background-color: #444;
    color: #fff;
    border-radius: 10px;
        }
    </style>

</head>

<body>
    <div class="equation">
        <equation id="my first equation" class="equation__content">
            $$\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$$
        </equation>
        <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
    </div>
    <p>See 
        <span class="popup_cross_reference" onMouseOver="javascript:this.className='popup_cross_reference_hover'" onMouseOut="javascript:this.className='popup_cross_reference'">
            <a class="cross-reference-link" href="#my first equation">(1)</a>
            <span>
                $\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$
            </span>
        </span>. This is doing exactly what I wanted to do. I would have prefered not to have to copy the equation, but whatever... I took this solution from <a href="https://stackoverflow.com/questions/15458021/css-javascript-mouseover-popup-box">here</a>.
    </p>
    
</body>

</html>

我不知道为什么它在 SO 上不能正常工作，但在外面却很好用。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>

<head>
    <title>References with popup windows</title>
    
    <meta charset="utf-8">
    <!-- Support for math --------------------------------------------------------------------------------------------------------->
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script type="text/x-mathjax-config">                                                                                         
        MathJax.Hub.Config({                                                                                                      
            tex2jax: {                                                                                                            
              inlineMath: [ ['$','$'], ["\\(","\\)"] ],                                                                           
              processEscapes: true                                                                                                
            }                                                                                                                     
        });                                                                                                                       
    </script>
    <!----------------------------------------------------------------------------------------------------------------------------->
    <style>
    .equation {
        display: table;
        width: 100%;
    }
    .equation__content, .equation__number {
        display: table-cell;
    }
    .equation__content {
        width: 90%;
    }
    .equation__number {
        text-align: right;
        font-family: serif;
    }
    .tip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tip .pop {
        visibility: hidden;
        width: 120px;
        background-color: white;
        color: black;
        text-align: center;
        border-style: solid;
        border-color: black;
        border-radius: 10px;
        padding: 5px 0;

        position: absolute;
        z-index: 1;
     }

    .tip:hover .pop {

        visibility: visible;
     }
    </style>
</head>

<body>
    <div class="equation">
        <equation id="my first equation" class="equation__content">
            $$f(x) = 5x^2$$
        </equation>
        <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
  </div>
    <p>See equation<div class="tip">(1)
      <span class="pop">
        <equation id="my first equation" 
        class="equation__content">
          $$f(x) = 5x^2$$
        </equation>
      </span>
    .</p>
   </div>
    
</body>

</html>

【讨论】：

我认为这可以帮助你，我正在赢得声誉，别忘了给我小费