激活图层滑块时，引导模式窗口不显示模式框

Question

我在主页上有一个模式框，当我们打开page.everything时加载，工作正常，但当我激活来自codecanyon的wordpress的层滑块插件时，模式窗口停止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>

当我激活图层滑块插件，然后在firebug中看到它时，它只显示以下代码：

<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

你需要排队你的可湿性粉剂脚本。您的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