如何在开发 jQuery 插件时更改 HTML 模板

Question

假设我正在使用以下模板使用 jQuery 制作弹出插件。以下代码位于默认选项中的 jQuery 插件文件中。

<div class="popup">
    <div class="title"></div>
<div>

所以，我想根据用户传递的参数更改title。

$('#test').pop_up({
    'title': 'this title i want to use'
});

完整代码

(function($){
    $.fn.extend({ 
        pop_up: function(options) {

            //Settings list and the default values
            var defaults = {
                template: '<div class="popup"><div class="title"></div></div>',
                title: 'Hello',
                content: 'Are you sure to continue?'
            };
            
            var options = $.extend(defaults, options);
            $(this).each(function () {
                var $this = $(this);
                $this.on('click', function (e) {
                    e.preventDefault();
                  $(options.template).find('.title').html(options.title); //here 
                });
            });
        }
    });
})(jQuery);

Answer 1

 <!-- Include jQuery Popup Overlay -->
  <script src="http://vast-eng.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {
      // Initialize the plugin
      $('#my_popup').popup();
    });
  </script>

试试这个 js 可以轻松找到更多Click here