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

Question

我正在使用具有引导程序主题的wordpress。我在主页上有一个模式框，当我们打开页面时会加载它。一切正常，但是当我从codecanyon接受wordpress的图层滑块插件时，模式窗口停止工作。仅窗口背景没有任何模式框出现。 我该如何消除这种冲突。

这是我的带模态框的模态窗口代码：

<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>

当我激活了图层滑块插件后，在萤火虫上看到它时，它仅显示以下代码：

<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