Как получить родительский узел без начальной точки?

Question

Я хочу предоставить метод для своего веб-приложения, который позволяет пользователю вызывать мою функцию в любом месте своего кода (внутри тегов скрипта), который будет отображать сообщение о постепенном исчезновении/исчезновении. То, что я не знаю, как это сделать, - это определить, где я нахожусь в DOM, не имея начальной точки отсчета.

Функция:

function displayMessage(message) { 
    // Display a notification if the submission is successful. 
    $('<div class="save-alert">' + message + '</div>') 
     .insertAfter($('')) // Do not know how to know where to put the message. 
     .fadeIn('slow') 
     .animate({ opacity: 1.0 }, 2000) 
     .fadeOut('slow', function() { 
     $(this).remove(); 
    }); 
} 

HTML-:

<!-- Some HTML --> 
<div> 
    <script type="text/javascript"> 
     displayMessage("My message."); 
    </script> 
</div> 
<!-- Some more HTML. --> 

Answer 1

Существует не надежный способ, чтобы получить эту информацию. Вы должны делать то, что делают большинство других библиотек, - передайте пользователю идентификатор или ссылку элемента на вашу функцию displayMessage, чтобы вы могли ее использовать.

Answer 2

Возможно, вы захотите использовать fixed positioning, чтобы разместить свою коробку в месте относительно окна просмотра браузера, независимо от того, где прокручивается пользователь в документе.

Answer 3

Если вы не хотите использовать селектор css или идентификатор в качестве аргумента, также существует альтернатива созданию виджета jQuery. Таким образом, вы можете использовать его как:

$("#msgArea").messageWidget("displayMessage"); 

или даже использовать его во много раз

$("#msgArea").messageWidget("displayMessage", "message to display"); 

Пример шаблонного штучка:

(function($) { 
    $.widget("ui.messageWidget", { 
     // default options 
     options: { message: undefined}, 
     // constructor 
     _create: function() { 
      if (this.options.message !== undefined) { 
       this.displayMessage(this.options.message); 
      } 
     }, 
     // Displays the message 
     displayMessage: function() { 
      this.element.append("your div's and messages"); 
     }, 
     // Allows constructor/setter arguments 
     _setOption: function(key) { 
      $.Widget.prototype._setOption.apply(this, arguments); 
     } 
    }); 
}(jQuery)); 

Answer 4

Вообще есть два способа, один, как было отмечено Casablanca вы предоставляете div в DOM для добавления сообщения. Во-вторых, и это тот, который, как я думаю, вам нужен, заключается в создании узла div на самой DOM. Таким образом, у вас есть полный контроль. В конце концов, он будет исчезать, когда вы закончите. Может также убить его и из дома. Это то, что fancylightbox (и, я уверен, многие другие) делает с DOM. Вы хотите поместить его прямо в начале тела, так что нет других содержащихся элементов и стилей по своему усмотрению - скорее всего, он будет плавать где-то около середины страницы, как в лайтбокс/диалоговом окне.