jQuery modal Dialog over iFrame

Question

Я использую диалог jQuery UI для модальных всплывающих окон. У меня есть некоторые фреймы на моей странице. IFrame (z-Index = 1500) находится поверх родительской страницы (z-index = 1000). Я открываю модальный диалог с родительской страницы. Я пытаюсь установить z-index, используя диалог $ ('modal'). ('Option', 'zIndex', 3000); но это не работает. Я также попробовал стек: true (чтобы уложить его сверху) и .dialog ('moveToTop'), но они, похоже, не работают.

Вот код: Родительская страница:

с использованием таблиц стилей: от "CSS/UI-темнота/Jquery-Ui-1.7.2.custom.css" с помощью сценариев: JQuery-1.3.2 .min.js & & JQuery-щ-1.7.2.custom.min.js

<script type="text/javascript" language="javascript"> 

    function TestModal() { 
    var modal = "<div id='modal'>Hello popup world</div>"; 
    $(modal).dialog({ 
     modal: true, 
     title: 'Modal Popup', 
     zIndex: 12000, // settin it here works, but I want to set it at runtime instead of setting it at design time 
     close: function() { 
     setTimeout(TestModal, 5000); 
     $(this).remove(); 
     } 
    }); 

    $('modal').dialog('option', 'zIndex', 11000); // these dont work 
    $('modal').dialog('moveToTop'); // these dont work 
    $('modal').dialog('option', 'stack', true); // these dont work 
    } 
    /** Run with defaults **/ 
    $(document).ready(function() { 

    TestModal(); 

    }); 

    </script> 
<div> 
Hello World 
<br /> 

</div> 

<iframe src="blocker.htm" width="100%" height="100%" frameborder="0" scrolling="no" name="myInlineFrame" 
style="z-index:10000;background-color:Gray;position:absolute;top:0px;left:0px" ALLOWTRANSPARENCY="false"> 
</iframe> 

IFrame: blocker.htm

.wrap {ширина: 100%; высота: 100%}

Я IFrame и я злой

Answer 1

Я использую this post найти максимальный Z-индекс динамически, а затем назначить его на время разработки что-то вроде:

$(modal).dialog({ /* other properties */ , zIndex: $.maxZIndex()+ 1, }) 

Answer 2

Как насчет

$('#modal').closest('div.ui-dialog').css('z-index', '3000') 

jQuery UI Dialog отображает DIV с классом ui-dialog, и он становится родителем вашего оригинального DIV, поэтому я использовал ближайший(), чтобы найти его (не ссылаясь на него напрямую по классу, если на странице больше диалогов).

Answer 3

Вы попробовали $('modal').dialog('zIndex', 11000)?

Answer 4

я написал расширение, которое будет делать то, что это я думаю, что вы на самом деле хотите. ..

http://plugins.jquery.com/project/jquery-framedialog