Модальное окно начальной загрузки не показывает модальное окно, когда активирован слайдер слоя

Question

Я работаю над WordPress с начальной загрузкой темы. У меня есть модальное окно на домашней странице, которое загружается, когда мы открываем страницу. Все работает нормально, но когда я активирую плагин слайдера слоев для WordPress из codecanyon, модальное окно перестает работать. Только фон окна появляется без какого-либо модального окна. Как я могу удалить это противоречие.

Вот мой код для модального окна с модальным окном:

<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