Question

我正在使用bootstrap theme.i在wordpage上有一个模式框，当我们打开页面时会加载它。所有工作正常但是当我从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

您需要将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

激活图层滑块时，bootstrap模态窗口不显示模态框

1 个答案: