如何在突出显示文本后启用弹出窗口?

时间:2013-03-12 22:46:27

标签: jquery css twitter-bootstrap highlight popover

我试图理解说唱天才如何启用功能,使用户能够突出显示,然后在突出显示完成后显示弹出窗口。我如何使用jquery做到这一点?

如果有帮助,我也会在我的项目中使用twitter bootstrap,包括用户点击按钮后的弹出窗口。

编辑:第一个示例有效(用户在输入框中选择文本),但第二个(用户选择'内容'中的文本)不起作用。

    <p class = 'content'>
    Click and drag the mouse to select text in the inputs.
    </p>
    <input type="text" value="Some text" />
    <input type="text" value="to test on" />

    <div></div>


    <script>
      $(":input").select( function () {
      $("div").text("Something was selected").show().fadeOut(500);
      });

      $("content").select( function () {
      $("div").text("Something else outside of input was selected").show().fadeOut(5000);
      });
    </script>

1 个答案:

答案 0 :(得分:2)

使用 JavaScript

document.getElementById("myDiv").onmousedown = function(){
             //Client has pressed the mouse button without releasing it...
             this.onmouseup = function(){
                    document.getElementById("myPopUp").style.display="block";
             };
};

DEMO

使用 JQuery

$("#myDiv").mousedown(function(){

          $("#myDiv").mouseup(function(){

                     $("#myPopUp").show();
          });
});

DEMO

JQuery's .select()

  

当用户在其中进行文本选择时,select事件将发送到元素。此活动仅限于input type="text"字段和textarea框。