bootstrap模式窗口不顯示模式框當啓動圖層滑塊

Question

我正在wordpress上使用bootstrap theme.i有一個模式框在主頁加載時，當我們打開page.everything工作正常，但當我激活圖層滑塊wordpress插件從codecanyon模態窗口停止working.only窗口背景出現沒有任何模態框。我怎樣才能消除這種衝突。

這是我與模態對話框模態窗口代碼：

<div id="openHouse" class="modal hide fade abc"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> x </button> 
<div class="well"><a href="http://pearlacademy.com/mumbai-career-conclave-2/"><img src="http://pearlacademy.com/wp-content/uploads/2013/11/career_conclave_banner.jpg" id="image" /></a></div></div> 
</div> 
<script type="text/javascript">// <![CDATA[ 
jQuery(document).ready(function($) { 
    $('#openHouse').css('width',"870px"); 
    $('#image').css('height',"400px"); 
    $('#openHouse').css('margin-left',"-430px"); 
    $('#openHouse').modal('show'); 
}); 
// ]]></script> 

當我有activte層滑塊插件，然後通過螢火蟲看到它那隻能說明這個代碼：

<div class="modal-backdrop fade in"></div> 

這裏是我的頁面上的整個代碼：

<div class="row"> 
<div class="span12"> 
<div class="row"> 
<div class="span3"> 

[include-page id="9917"] 
<div class="visible-phone"> 
<div class="accordion-heading" style="margin-bottom: 5px;"><a class="accordion-toggle" style="color: 5e5e5e;" href="http://pearlacademy.com/noida-campus/">Noida</a></div> 
<div class="accordion-heading" style="margin-bottom: 5px;"><a class="accordion-toggle" style="color: 5e5e5e;" href="http://pearlacademy.com/jaipur-campus/">Jaipur</a></div> 
<div class="accordion-heading" style="margin-bottom: 5px;"><a class="accordion-toggle" style="color: 5e5e5e;" href="http://pearlacademy.com/chennai-campus/">Chennai</a></div> 
<div class="accordion-heading" style="margin-bottom: 5px;"><a class="accordion-toggle" style="color: 5e5e5e;" href="http://pearlacademy.com/delhi-campus/">Delhi</a></div> 
</div> 
<div style="margin-top: 20px;"><a href="http://pearlacademy.com/admissions/"><img title="Pearl Academy ranked Second" alt="Pearl Academy ranked Second" src="http://pearlacademy.com/wp-content/uploads/2013/10/admissions.jpg" /></a></div> 

<div style="margin-top: 20px;"><a href="http://pearlacademy.com/second-amongst-indias-best-fashion-college-2013/"><img title="Pearl Academy ranked Second" alt="Pearl Academy ranked Second" src="http://pearlacademy.com/wp-content/uploads/2013/08/Pearlon2rank.jpg" /></a></div> 
</div> 
<!--# Span 3 Ends--> 
<div class="span9 visible-desktop">[include-page id="9894"] 
[include-page id="9896"] 
<!--# carousel Ends--></div> 
<!--# Span 9 Ends--> 

</div> 
</div> 
</div> 



<div id="openHouse" class="modal hide fade abc"> 
<div class="modal-body"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> x </button> 
<div class="well"><a href="http://pearlacademy.com/mumbai-career-conclave-2/"><img src="http://pearlacademy.com/wp-content/uploads/2013/11/career_conclave_banner.jpg" id="image" /></a></div></div> 
</div> 
<script type="text/javascript">// <![CDATA[ 
jQuery(document).ready(function($) { 
    $('#openHouse').css('width',"870px"); 
    $('#image').css('height',"400px"); 
    $('#openHouse').css('margin-left',"-430px"); 
    $('#openHouse').modal('show'); 
}); 
// ]]></script> 

Answer 1

您需要排入您的WP腳本。您的JS正在被解析爲XML，因此// <![CDATA[我假設您將JS直接複製到您的頁面或文章的內容區域？

<script type="text/javascript">// <![CDATA[ 
jQuery(document).ready(function($) { 
    $('#openHouse').css('width',"870px"); 
    $('#image').css('height',"400px"); 
    $('#openHouse').css('margin-left',"-430px"); 
    $('#openHouse').modal('show'); 
}); 
// ]]></script> 

如何排隊WP腳本：http://codex.wordpress.org/Function_Reference/wp_enqueue_script