從Rails link_to創建JavaScript彈出功能

我試圖創建一個標準的JavaScript彈出窗口小部件來提供跨我的Rails應用程序的提示。我希望能夠創建一個單一的彈出窗口小部件，其中包含的信息隨着不同的提示按鈕被點擊而改變。我似乎找到的所有示例都使用javascript onclick，但這不會允許我根據單擊哪個按鈕傳遞不同的文本值。另外，我一直看到使用html創建的彈出窗口，而不是在javascript中完成。從Rails link_to創建JavaScript彈出功能

這是工作調用javascript函數

<%= f.label :name %><%= link_to image_tag("hint_link.jpeg", :size=>"13x13"), '#', :onclick => 'create_hint_widget("a"); return false;' %>

但我需要知道如何從被調用函數彈出一個小窗口，如

function hint_widget(hint_text) { create_popup_widget }

也許這樣的事情？

$("#draggable").draggable().html("<div id='draggable' class='ui-widget-content'><p>hint_text</p></div>");

這是最好的解決方案，我已經能夠拿出的，但有可能是更好的解決方案。我開的任何意見/建議

來源

2016-02-24 user3027875

這是你將如何開始構建一個提示系統的基礎 - 但是有成千上萬已經上市，因此它並沒有太大的意義寫一個，除非你正在做它學習。

$(function(){ 
 

 
    # delegate a handler to elements that have a `data-tooltip` attribute. 
 
    $(document).on('click', 'a[data-tooltip]', function(){ 
 
    var $el = $(this) 
 
    var $tooltip = $('<div class="tooltip-overlay">').text($el.data('tooltip')); 
 
    $el.append($tooltip); 
 
    # fade out and remove tooltip after 3s 
 
    $tooltip.delay(3000).fadeOut(100).remove(); 
 
    return false; 
 
    }); 
 
    
 
    # handle when user clicks a tooltip 
 
    $(document).on('click', '.tooltip-overlay', function(){ 
 
    $(this).remove(); 
 
    return false; 
 
    }); 
 
});

a[data-tooltip] { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.tooltip-overlay { 
 
    position: absolute; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
    top: -140%; 
 
    padding: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    
 
<p><a href="#">Link without tooltip</a></p> 
 
<p><a href="#" data-tooltip="Sample text" class="tooltip">Link with tooltip</a></p>

來源

2016-02-24 18:59:57 max

從Rails link_to創建JavaScript彈出功能

回答

相關問題