使用wordpress的simplemodal

我想使用simplemodal在wordpress文章中有文字的模態彈出窗口。我玩過各種插件，但它們有特定的用途（例如聯繫表單，或者我看到的另一個用於顯示您可以自定義的單個註釋）。使用wordpress的simplemodal

我試過按照這個教程：http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html，但對於沒有高級jquery或wordpress知識的人來說說明並不是很清楚，它根本不適合我。例如，作者沒有解釋你放置函數的位置。

對於任何在wordpress中使用simplemodal工作而無需開發插件的人，可否請協助？謝謝。

來源

2011-02-15 Richard

本教程是一個解決方案的良好開端，但並不完全提供所有的細節。我也會做出一些改變。這裏是我會做的就是它的工作：

創建Ajax的處理程序模板，頁面
確保要用來打開模態的鏈接包括postpopup類，並具有在後ID rel屬性。
在主題目錄
下載SimpleModal 1.4.1創建js/文件夾和文件放到js/文件夾
創建自定義JavaScript文件（site.js），並將其放置在js/文件夾
將下面的代碼site.js：

。

jQuery(function ($) { 
    $('a.postpopup').click(function(){ 
     id = this.rel; 
     $.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) { 
      var data = $('<div id="ajax-popup"></div>').append(resp); 
      // remove modal options if not needed 
      data.modal({ 
       overlayCss:{backgroundColor:'#000'}, 
       containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'} 
      }); 
     }); 
     return false; 
    }); 
});

下面的代碼添加到你的主題functions.php文件：

。

function my_print_scripts() { 
    if (!is_admin()) { 
     $url = get_bloginfo('template_url'); 
     wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true); 
     wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true); 
    } 
} 
add_action('wp_print_scripts', 'my_print_scripts');

這應該得到它爲你工作。確保你的主題頁腳有wp_footer()功能。我重新調整了模式窗口的調用方式，以便內容自動居中。

來源

2011-02-15 18:15:38

謝謝埃裏克，這非常有幫助，我得到了simplemodal的工作。如果你不介意，我還有一個額外的問題。我也下載了OSX simplemodal主題，並試圖在這種情況下使用它。你能告訴我需要做些什麼修改才能在這裏使用它？ – Richard 2011-02-19 05:37:52

使用wordpress的simplemodal

回答

相關問題