Модальное окно в Iframe

Общие вопросы по использованию фреймворка. Если не знаете как что-то сделать и это про Yii, вам сюда.
Закрыто
gashik
Сообщения: 50
Зарегистрирован: 2012.03.21, 16:50
Откуда: Горловка

Модальное окно в Iframe

Сообщение gashik »

Есть виджет, устанавливаеться в iframe, что-то типа

Код: Выделить всё

<html>
<head>
    <script src="http://site.ru/api/widget1.js"></script>
</head>
<body>
    <div id="widget" style="border:1px solid black; float:left;">
        <script type="text/javascript">var widgetOptions={...};createWidget("widget",widgetOptions);</script>
    </div>
</body>
</html>
во вьюхе, которая генерит код iframe, подключаеться виджет

Код: Выделить всё

<?php
    header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');
?>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
<?php
    $cs = Yii::app()->getClientScript();
    $cs->registerCoreScript('jquery');
    $cs->registerCssFile(Yii::app()->request->baseUrl.'/api/style/style.css');
</head>
<body>
    <?php $this->widget('Widget'); ?>
    <?php echo CHtml::link('Виджет', 'javasript:void(0);', array(
    'onclick'=>'$("#widgetform").dialog("open"); return false;',
    ));?>
...
всякий код html
...
</body>
</html>
вьюха widget

Код: Выделить всё

<div style="display:none;">
<?php

    $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
            'id' => 'widgetform',
            'options' => array(
        'autoOpen' => false,
        'modal' => true,
            ),
    ));
?>
//Код отображения
<?php
    $this->endWidget('zii.widgets.jui.CJuiDialog');
?>
</div>
Так вот при нажатии кнопки, модальное окно открываеться в iframe. Подскажите, как сделать, чтобы модальное окно открывалось в родительском окне?
gashik
Сообщения: 50
Зарегистрирован: 2012.03.21, 16:50
Откуда: Горловка

Re: Модальное окно в Iframe

Сообщение gashik »

Костыль конечно ужасный, но что-то получаеться
код страницы

Код: Выделить всё

<html>
<head>

</head>
<body>
<div id="par"></div>
<script src="http://site.ru/api/widget1.js"></script>
<div id="don" style="border:1px solid black; float:left;">
    <script type="text/javascript">var widgetOptions=            {параметры};createWidget("don",widgetOptions);</script>
</div>
</body>
</html>
получаеться страница

Код: Выделить всё

<div id="par"></div>
<div id="don" style="border:1px solid black; float:left;">
    <div>
    <iframe src="site.ru?параметры">....</iframe>
    </div>
</div>
 
в коде фрейма прописал

Код: Выделить всё

    <?php 
    $style='<link rel="stylesheet" href="'.Yii::app()->request->getBaseUrl(true).'/api/style/dialog.css" type="text/css" media="screen" />';

    $cod='<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">';
    $cod.='<span id="ui-id-1" class="ui-dialog-title">Обратная связь</span>';
    $cod.='<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">';
    $cod.='<span class="ui-icon ui-icon-closethick">close</span>';
    $cod.='</a></div>';
    $cod.='<div class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 86px; height: auto;" scrolltop="0" scrollleft="0">';

    $ends='</div></div>';
    echo CHtml::link('»  Виджет1', 'javasript:void(0);', array(        
    'onclick'=>'
        var sourceDiv=$("#gateform"); 
        var a=$(window.parent.document).find("div#par");
        var h=$(window.parent.document).find("head");
        h.append("'.addslashes($style).'");
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "'.Yii::app()->request->getBaseUrl(true).'/api/js/jquery.js";
        window.parent.document.getElementsByTagName("head")[0].appendChild(script);

        script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "'.Yii::app()->request->getBaseUrl(true).'/api/js/jquery-ui.min.js";
        window.parent.document.getElementsByTagName("head")[0].appendChild(script);

        a.addClass("ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable");
        a.css({"outline-color": "currentColor", "outline-width": "0px", "outline-style": "none", "height": "auto", "width": "840px", "top": "135px", "left": "0px", "display": "block", "z-index": "1002"});
        a.attr({"tabindex": "-1", "role": "dialog", "aria-labelledby": "ui-id-1"});
        a.append("'.addslashes($cod).'"+sourceDiv.html()+"'.addslashes($ends).'");

        return false;',
    ));?>
почти получилось то что нужно, еще правда напильником стили доработать, а то как-то криво отображаеться, но все же может есть более "правильное" решение? Кто-нибудь подскажет?
gashik
Сообщения: 50
Зарегистрирован: 2012.03.21, 16:50
Откуда: Горловка

Re: Модальное окно в Iframe

Сообщение gashik »

Блин, начинаю понимать, наверное. В хедер, я добавляю стили и скрипты. Стили вроде как цепляються, а вот скрипты конечно же не работают. Видимо можно было бы сделать так

Код: Выделить всё

    'onclick'=>'
        var sourceDiv=$("#gateform"); 
        var a=$(window.parent.document).find("div#par");
        var h=$(window.parent.document).find("head");
        h.append("'.addslashes($style).'");
        a.dialog("open");
        return false;',
    ));?>
если заставить работать скрипты. Только как их заставить работать?
gashik
Сообщения: 50
Зарегистрирован: 2012.03.21, 16:50
Откуда: Горловка

Re: Модальное окно в Iframe

Сообщение gashik »

Как я понимаю
1. На странице с Iframe, нужно проверить загружен ли jquery и jquery-ui
2. Если нет, загрузить, каким то чудом, чтоб они работали
3. Вызвать для нужного элемента dialog("open").
Ребят, неужели никто не знает как это сделать?
gashik
Сообщения: 50
Зарегистрирован: 2012.03.21, 16:50
Откуда: Горловка

Re: Модальное окно в Iframe

Сообщение gashik »

Сам с собой поговорил)))
во фрейме:

Код: Выделить всё

    $cs->registerScript('document','
        if (typeof window.parent.jQuery != "function") {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "'.Yii::app()->request->getBaseUrl(true).'/api/js/jquery.js";
            window.parent.document.getElementsByTagName("head")[0].appendChild(script);

            script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js";
            window.parent.document.getElementsByTagName("head")[0].appendChild(script);
        }
        if (typeof window.parent.jQuery == "function"){
            if (typeof window.parent.jQuery.ui!="object"){
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js";
                window.parent.document.getElementsByTagName("head")[0].appendChild(script);
            }
        }
        var h=$(window.parent.document).find("head");
        h.append("<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css\" />");',CClientScript::POS_LOAD);
 

Код: Выделить всё

    <?php 
    echo CHtml::link('»  Виджет1', 'javasript:void(0);', array(        
    'onclick'=>'
        if(typeof window.parent.jQuery("div#par").dialog({
                resizable: true,
                      autoOpen: false,
                      height: 300,
                      width: 350,
                      modal: true})=="object"){
            window.parent.jQuery("div#par").dialog("open");
        }
        return false;',
        ));
    ?>
может криво, но мало ли, кому-нибудь пригодиться.
Закрыто