Question

我的模态对话有问题。我在iframe中有一个调用模态的按钮。有没有一种方式，模态，覆盖整个窗口，而不仅仅是iframe？

我是编程新手，我想知道是否有这种可能性？

提前感谢您的时间。

框架内的代码：

<link rel="stylesheet" href="../sis_tparty/jquery1.8/development-bundle/themes    /base/jquery.ui.all.css">
<script src="../sis_tparty/jquery1.8/development-bundle/jquery-1.6.2.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.core.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.accordion.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.button.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.position.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.ui.dialog.js"></script>
<script src="../sis_tparty/jquery1.8/development-bundle/ui/jquery.effects.core.js"></script>
<link rel="stylesheet" href="../sis_tparty/jquery1.8/development-bundle/demos.css">
<script type="text/javascript" src="PacObservacao.js"></script>

<style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

<script type="text/javascript">
    var J18 = jQuery.noConflict();
</script>

<script type="text/javascript">
    J18(function() {
        J18("#accordion").accordion({
            autoHeight: false,
            navigation: true,
            collapsible: true
        });
    });
</script>

<script>
    J18(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        J18("#dialog:ui-dialog").dialog("destroy");

        J18("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Salvar": function() {
                },
                Cancel: function() {
                    J18(this).dialog("close");
                }
            },
            close: function() {
                J18(this).dialog("close");
            }
        });

        J18("#create-user")
                .button()
                .click(function() {
            J18("#dialog-form").dialog("open");
        });
    });
</script>

<div class="demo">
    <div id="accordion">
    </div>
</div>
<div style="position:absolute;bottom:0;">
    <button id="create-user">
        <img src="../sis_images/nota.png"/>
        Nova nota
    </button>
</div>
<?php
include('form_pac_observacao.php');
echo inputhidden("refresh_tela", "true");
echo inputhidden("str_acesso", "11111111");
echo inputhidden("pac_id");
echo inputhidden("pac_nome");
?>

Answer 1

您可以使用JQuery插件SimpleModal

funcion appendTo 的示例：

$('#div-modal').modal({
appendTo: $(window.parent.document).find('body'),
overlayCss: {backgroundColor:"#333"},  // Optional
overlayClose:true, 
});
// Set overlay's width, not optional
$(window.parent.document).find('#simplemodal-overlay').css('width', '100%');

如果要作为模态打开的div位于父窗口中，则可以替换

$('div-modal') with $(window.parent.document).find('#div-modal')

Jquery Modal问题

1 个答案: