html - 如何在顶部呈现我的对话框？

标签 html css layer

我在弹出窗口上有一个对话框，我想渲染到顶部的对话框，但现在它显示在弹出窗口下面: enter image description here

你能告诉我如何在顶部呈现对话框“信息”吗？我的代码是这样的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

诺丁加 

<script language="JavaScript1.2">
            function doUnload()
            {
                opener.document.actionForm.action.value='Noteringar';
                opener.document.actionForm.actionCommand.value='releaseLock';
                opener.document.actionForm.submit();
                //opener.releaseLock();

            }
          </script>


<body id="content" onunload="doUnload()" >
<form name="actionForm" action="PandoraActionServlet" style="display: inline;" method="post">


    <input type="hidden" name="currPage" value="/PandoraArendeWeb/arendeprocess_noteringar.jsp" />
    <input type="hidden" name="action" value="" />
    <input type="hidden" name="actionCommand" value="" />
    <input type="hidden" name="actionModifier" value="" />
    <input type="hidden" name="notid" value="" />
    <input type="hidden" name="textnote" value="" />
    <input type="hidden" name="fname" value="Markus                        " />
    <input type="hidden" name="lname" value="Stålö                         " />
    <input type="hidden" name="sign" value="MSTÅ                          " />

<div class="yta2">
    <div class="fl100 TB_nb">&nbsp;Noteringar&nbsp;1201186-2 </div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
    <div class="fl2">&nbsp;</div>
    <div class="fl95">
    <div STYLE="overflow: auto; height: 300;">
        <table width="100%" cellspacing="0" cellpadding="2" align="center" class="bb" id="base_table">
            <tr>
                <th class="thkant" width="15%">Skapad datum</td>
                <th class="thkant" width="70%">Text</td>
                <th class="thkant" width="15%">Skapad av</td>
            </tr>

            <tr class="note" id="110">
                <td>2012-08-31</td>
                <td>Test 7</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="109">
                <td>2012-08-31</td>
                <td>Test 6</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="108">
                <td>2012-08-31</td>
                <td>Test 5</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="107">
                <td>2012-08-31</td>
                <td>Test 4</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="106">
                <td>2012-08-31</td>
                <td>Test 3</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="105">
                <td>2012-08-31</td>
                <td>Test 2</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="104">
                <td>2012-08-31</td>
                <td>Test</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="103">
                <td>2012-08-30</td>
                <td>Släpp hörnflaggan!</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="102">
                <td>2012-08-30</td>
                <td>Fotboll är en bollsport?</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>

            <tr class="note" id="101">
                <td>2012-08-30</td>
                <td>Glen is the man!!!</td>
                <td>Markus&nbsp;Stålö,&nbsp;<br>MSTÅ</td>
            </tr>


        </table>
    </div>
    </div>
    <div class="clear">&nbsp;</div>
    <div class="fl2">&nbsp;</div>
    <div class="fl30"><input type="button" value="Skapa notering" class="opener_create_note" ></div>

</div>


<div id="new_note">

    <div class="clear">&nbsp;</div>
    <div class="fl2">&nbsp;</div>
    <div class="fl15">Text:</div>
    <div class="fl65"><textarea cols="60" rows="4" name="newnote" id="write_note"></textarea></div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
</div>

<div id="edit_note">

    <div class="clear">&nbsp;</div>
    <div class="fl2">&nbsp;</div>
    <div class="fl15">Text:</div>
    <div class="fl65"><textarea cols="60" rows="4" name="editnote" id="change_note"></textarea></div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
    <div class="clear">&nbsp;</div>
    <div class="fl2">&nbsp;</div>
    <div class="fl15">Skapad av:</div>
    <div class="clear"></div>
    <div class="fl2">&nbsp;</div>
    <div class="fl90" id="sname"></div>
</div>



<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery.pandora.globals.js" type="text/javascript"></script>



<SCRIPT language="JavaScript1.2" type="text/javascript">
    $(function() {

    $('#base_table').css('cursor','pointer');

    $('.opener_create_note').click(function() {
        $("#new_note").dialog('open');
        return false;
    });

    $("#new_note").dialog({
            width:'600', height:'100', draggable:false, 
            open: function(){                 
            $("#write_note").focus();
             },                      
            autoOpen: false, modal:true, show:'fold', hide: 'slide', resizable:false, closeOnEscape: true, title: 'Skapa notering',
            buttons: { 'Avbryt': function() { 
                                $('textarea#write_note').val("");
                                $(this).dialog('close'); },
                                'Spara': function() { 
                                var text = $('textarea#write_note').val();
                                //if(text.length > 1000) {
                                    //alert("Fältet får innehålla max 1000 tecken.");
                                //} else {

                                    if(text.length < 1) {
                                        if (confirm("Noteringen är tom. Vill du fortsätta?")) {
                                            submitNotering('Noteringar','ny', '', text);                                 
                                            $(this).dialog('close');
                                        }
                                    } else {
                                        if(text.length < 1000){
                                        submitNotering('Noteringar','ny', '', text);                                 

                                        $(this).dialog('close');
                                        } else {
                                         //alert("Fältet får innehålla max 1000 tecken.");
                                         //submitNotering('Noteringar','max1000', '', text);

                                         doAsk('Information', '<ul><li id="message_info_0">Fältet får innehålla max 1000 tecken.</li></ul>','' ,'','',''); 

                                        }
                                    }
                                //} 
                                } 

                                }


            }

            );

    $('.note').click(function() {

        var $nr = $(this).attr('id');       
        $("#edit_note").data("rid", $nr);
        $("#edit_note").dialog('open');

        var $currText = "";
        var $currSkapad = "";
        var $currNamn = "";
        var $tds = $(this).find('td');
        if($tds.length != 0) {  

            $currSkapad = $tds.eq(0).text();    
            $currText = $tds.eq(1).text();
            $currNamn = $tds.eq(2).text() + ", ";
            $.trim($currNamn);
        }
        $("textarea#change_note").val($currText);
        $("#sname").text($currNamn + $currSkapad);
        return false;
    });

    $("#edit_note").dialog({
            width:'600', height:'100', draggable:false, autoOpen: false, modal:true, show:'fold', hide: 'slide', resizable:false, closeOnEscape: true, title: '&Auml;ndra notering',
            buttons: { 'Ta bort': function() { 
                                if (confirm("Vill du ta bort noteringen?")) {
                                    submitNotering('Noteringar','tabort', $(this).data("rid"), '');
                                    $(this).dialog('close');
                                } },
                                'Avbryt': function() { 
                                $(this).dialog('close'); },
                                'Spara': function() { 
                                var text = $('textarea#change_note').val();
                                if(text.length > 1000) {
                                    alert("Fältet får innehålla max 1000 tecken.");
                                } else {
                                    if(text.length < 1) {
                                        if (confirm("Noteringen är tom. Vill du fortsätta?")) {
                                            submitNotering('Noteringar','spara', $(this).data("rid"), text); 
                                            $(this).dialog('close');
                                        }                                   
                                    } else {

                                        submitNotering('Noteringar','spara', $(this).data("rid"), text); 
                                        $(this).dialog('close'); 
                                    }
                                    }
                                }
                                }           
            });                  

    });
    </SCRIPT>



</form>









</body>
</html>

CSS:

#dialog {position:absolute; width:425px; padding:0px; margin-top:50px; z-index:200; background:#fff}
#dialog-header {display:block; position:relative; width:425px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold}
#dialog-title {float:left}
#dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:75%}
#dialog-mask {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#FFF; opacity:.40; filter:alpha(opacity=40); z-index:100}
.prompt {background-color: #FFFFFF; bottom right no-repeat; border:3px solid #000000; border-top:none}
.promptheader {background-color: #FFFFFF; repeat-x; color:#355468; border:3px solid #000000; border-bottom:none}

.dialogbuttonlink{background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    color: #003366;
    text-decoration: underline;
    font-weight: bold;  }

* body{
    margin: 0px;
}

#top {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 35px;
    width: 100%
}

#av_ikoner {
    position: absolute;
    right: 200px;
    display: inline;
}

#av_logga {
    float: right;
    right: 5px;
    display: inline;
    text-align: right;
    margin-right: 20px;
}

#flikkant {
    position: absolute;
    left: 0px;
    top: 50px;
    height: 35px;
    width: 100%;
    padding-left: 16px;
    padding-top: 8px;
    margin-bottom: 0px;
}

#sub {
    position: absolute;
    left: 0px;
    top: 85px;
    height: 10px;
    width: 100%;
    padding-left: 16px;
    padding-top: 2px;
    margin-bottom: 10px;
}

#yta {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 105px;
    padding: 4px;
}

#popupD {
    position: absolute;
    top: 1750px;
    left: 180px;
    height: 125px;
    width: 1075px;
}

#popupS {
    position: absolute;
    top: 1750px;
    left: 300px;
    height: 125px;
}

#popupP {
    position: absolute;
    top: 1600px;
    left: 300px;
    height: 125px;
}

#popupSokNamn {
    position: absolute;
    top: 200px;
    width: 600px;
    left: 400px;
    height: 800px;
}

#popupSokNamn2 {
    position: absolute;
    top: 950px;
    width: 600px;
    left: 400px;
    height: 800px;
}

#popupR {
    position: absolute;
    top: 1700px;
    left: 200px;
    height: 50px;
}

#popupI {
    position: absolute;
    top: 700px;
    left: 300px;
    right: 1%;
    height: auto;
}

#popupF {
    position: absolute;
    top: 280px;
    left: 300px;
    right: 25%;
    height: auto;
}

#popupA {
    position: absolute;
    top: 300px;
    left: 300px;
    right: 1%;
    height: auto;
}

#popupU {
    position: absolute;
    top: 300px;
    left: 300px;
    right: 1%;
    height: auto;
}

#popupO {
    position: absolute;
    top: 300px;
    left: 300px;
    right: 1%;
    height: auto;
}

#popupEPn {
    position: absolute;
    top: 300px;
    left: 300px;
    right: 1%;
    height: auto;
}

#popupEPa {
    position: absolute;
    top: 300px;
    left: 300px;
    right: 1%;
    height: auto;
}

#rappALL
,
#rappAE
,
#rappFJ
,
#rappKO
,
#rappPT
,
#rappUZ
,
#rappX
,
{
height
:

600
px
;


overflow
:

auto
;


width
:

100%;
}
#klassTB {
    height: 100px;
    overflow: auto;
    width: 100%;
}

#popupD1 {
    position: absolute;
    left: 250px;
    height: 125px;
}

.yta2 {
    display: inline;
    width: 100%;
    padding-left: 5px;
}

#L-col {
    display: inline;
    width: 65%;
}

#R-col {
    display: inline;
    width: 35%;
}

#box {
    width: 400px;
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 100px;
}

#scroll {
    height: 680px !important;
    overflow: auto;
}

最佳答案

堆叠由position、z-index 和文档顺序的组合控制。例如，relative block 将显示在 static 之上，即使静态出现在文档的后面也是如此。

这里有一个网站，非常适合试验和熟悉属性如何交互:http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

要回答您的问题，因为您的弹出窗口已经是 absolute，您可能只需要将它们的 z-index 设置为 1 或更大.

关于html - 如何在顶部呈现我的对话框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12211093/

上一篇：css - 诺基亚 C5 边框宽度错误

下一篇：asp.net-mvc - 使用 CSS 时如何使用 Action Link

相关文章：

javascript - 如何创建返回页面顶部的按钮？

html - 中心堆栈图像和 span 标签 - bootstrap

javascript - 传单 : how to access and update a marker inside a layer

javascript - 以编程方式折叠 Leaflet JS 层控件

javascript - Jquery 在 div 上添加和删除多个图像层

html - 谷歌浏览器中的滚动条问题

javascript - jquery/html 插值

html - 如何居中对齐我的 2 列布局

javascript - 在AngularJS中，当制作指令时，有没有办法使用链接函数来操作模板的DOM？

javascript - 如何始终在当前 View 中保持水平底部滚动条

©2024 IT工具网  联系我们