如何在突出顯示文本後啓用彈出窗口？

Question

我想了解rap天才如何啓用功能，使用戶能夠突出顯示，然後在突出顯示完成後顯示彈出窗口。我將如何使用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> 

Answer 1

使用的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()

的選擇事件，當用戶使得它裏面文本選擇被髮送給一個元素。此事件僅限於input type="text"字段和textarea字段。