如何在帧集上放置div叠加?(How to put a div overlay over framesets?)

我需要使用jQuery 1.6.2为现有的jsp页面创建一个请等待页面。 我能够让div叠加层工作,以及在页面中心的模态窗口中请等待动画。 但是,叠加层仅覆盖其中一个框架集,即中心框架集。

html结构基本上是(为了清楚起见,我要留下很多):

...
<frameset >
  <frame id="topMostFrame">
  <frameset>
    <frame id="leftMostframe">
    <frame id="centerMostFrame">
  </frameset>
</frameset>
<noframes>
</noframes>
</body>
</html>

JQUERY

function getTheOverlay(){
    $(document).ready(function() {
        $("#loading-div-background").css({opacity: 0.5});
        $("#loading-div-background").show();
        //alert("In getOverlay!");
    }); 
}

function remove(){
    $(document).ready(function() {
        $('#loading-div-background').hide();
    });
}

HTML

<div id="loading-div-background" style="display:none" class="ui-widget">
    <div id="loading-div" class="ui-corner-all">
      <img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/>
     </div>
</div>

CSS

#loading-div-background {
    display:none;
    position:absolute;
    top:0;
    left:0;
    background:gray;
    width:100%;
    height:100%;
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

#loading-div {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  text-align:center;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left:-150px;
  margin-top: -100px;
}

我尝试将html移动到我的jquery函数中加载,但它没有在IE8中显示叠加层。 我也有时间让IE8使用叠加层本身,但这是使用上面的CSS修复的。

我需要禁用左框架上的链接,这可能是我将要使用的方法,或者用覆盖层覆盖它们。 是的,我知道框架很糟糕,但这就是我的工作。

我无法让叠加层覆盖其他框架集并覆盖整个页面。 我已经读过这是不可能的框架集,虽然我猜可能有一个解决方法。 但是,当我使用警报进行调试时,覆盖覆盖整个页面。

我的问题是:为什么使用警报使覆盖层覆盖所有内容? 即使使用框架集,我还能做些什么来获得相同的效果吗?


I have a requirement to create a please wait page using jQuery 1.6.2 for an existing jsp page. I was able to get the div overlay to work, along with an please wait animation in a modal window in the center of the page. However, the overlay only covers one of the framesets, the center one.

The html structure is basically (I'm leaving a lot out for clarity):

...
<frameset >
  <frame id="topMostFrame">
  <frameset>
    <frame id="leftMostframe">
    <frame id="centerMostFrame">
  </frameset>
</frameset>
<noframes>
</noframes>
</body>
</html>

JQUERY

function getTheOverlay(){
    $(document).ready(function() {
        $("#loading-div-background").css({opacity: 0.5});
        $("#loading-div-background").show();
        //alert("In getOverlay!");
    }); 
}

function remove(){
    $(document).ready(function() {
        $('#loading-div-background').hide();
    });
}

HTML

<div id="loading-div-background" style="display:none" class="ui-widget">
    <div id="loading-div" class="ui-corner-all">
      <img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/>
     </div>
</div>

CSS

#loading-div-background {
    display:none;
    position:absolute;
    top:0;
    left:0;
    background:gray;
    width:100%;
    height:100%;
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

#loading-div {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  text-align:center;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left:-150px;
  margin-top: -100px;
}

I tried moving the html to load in my jquery function, but it didn't display the overlay in IE8. I also had a time getting IE8 to work with the overlay itself, but that is fixed using the CSS above.

I need to disable the links on the left frame, which is probably the approach I'll use or else cover them with the overlay. Yes I know frames are bad, but that is what I was given to work with.

I can't get the overlay to go over the other framesets and cover the entire page. I've read that this is impossible to do with framesets, although I'm guessing there could be a workaround. However, when I use an alert for debugging purposes, the overlay covers over the entire page.

My question is: why is using an alert making the overlay cover everything? Is there something else I could do to get the same effect, even with the framesets?


原文:https://stackoverflow.com/questions/14941671
2023-06-05 16:06

满意答案

bootstrap.min.js返回404错误,我相信这就是原因。

这是返回错误的URL: http//aerofied.snbw.co/js/bootstrap.min.js

您还应该阅读Bootstrap文档 。 您必须为表单使用某些特定的类。


bootstrap.min.js returns a 404 error and I believe this is the reason.

This is the URL that returns the error: http://aerofied.snbw.co/js/bootstrap.min.js

You should also read the Bootstrap documentation. You must use some specific classes for your forms.

相关问答

更多

Twitter Bootstrap中的弹出窗口(Popovers in Twitter Bootstrap)

你在popover元素<a>标签中遗漏了一些东西,格式是这样的: <a id="test" data-toggle="tooltip" rel="popover">Click Me</a> 然后它应该工作,例如: http : //jsfiddle.net/52VtD/1983/ You are missing some things in your popover element <a> tag, have the format be something like this: <a id="te...

为什么我的Twitter Bootstrap表单字段使用流体容器溢出?(Why do my Twitter Bootstrap form fields overflow their well using fluid container?)

输入html标签及其相应的.input-*样式只设置了CSS width 。 这是设计。 但是,添加一个css max-width:100%将确保太大的输入被控制。 例如把它添加到你的头: <style> input { max-width: 100%; } </style> The input html tags and their corresponding .input-* styles only set the css width. This is by...

Twitter引导程序:Dropdownlist和Textbox无法正确对齐(Twitter bootstrap: Dropdownlist and Textbox doesn't align properly)

将“form-inline”类添加到表单中。 <form class="form-inline"> 如果你不能这样做,你总是可以使用JQuery <script type="text/javascript"> $(document).ready(function () { $("form").addClass("form-inline"); }); </script> Add the class "form-inline" to your form. <form class="form...

Twitter Bootstrap:表单里面有一个图标?(Twitter Bootstrap: Form with an icon inside of it?)

这正是我正在寻找的: http://bootsnipp.com/snipps/stylish-search-form ? This does just about what I'm looking for: http://bootsnipp.com/snipps/stylish-search-form?

Twitter Bootstrap Carousel导航显示(Twitter Bootstrap Carousel Navigation Display)

看起来他们在演示中使用了以下引导程序样式表: http://www.tutorialrepublic.com/examples/css/bootstrap.min.css 通过将其替换为小提琴中的那个,您可以获得正确的程式化代码。 的jsfiddle 专家提示: 如果您想知道某些内容是如何呈现的,只需使用Inspect Element ,它将为您提供如下内容: 从那里,您可以切换每个属性,以查看它们如何影响显示的实时演示。 你可以复制css并把它扔进你自己的小提琴里。 或者您甚至可以查看每个部分的...

使用较少的twitter bootstrap(Using less with twitter bootstrap)

如果你使用bootswatch中较少的文件,我认为你还需要使用bootstrap中较少的文件。 variables.less文件将覆盖原始文件中的值。 我做的工作是下载bootstrap less文件,将bootswatch.less和variables.less复制到同一个文件夹(如果bootswatch不是最新版本,我将其重命名为variables-bootswatch.less以实现向前兼容性)。 然后我修改了bootstrap.less文件以包含上述文件: // Header and ev...

无法正确显示Twitter Bootstrap glyphicons(Unable to properly display Twitter Bootstrap glyphicons)

我首先检查你的libs上的版本。 如果您在此拉取请求之前使用版本,则可能指向不存在的资产。 Bootstrap 3.0.0-wip分支将抽象的glyphicons抽象出来。 我还会在URL资产路径之前使用/从基本URL调用。 <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="/bootstrap/css/bootstrap-glyphicons.css"> 在官方gly...

Twitter Bootstrap - 无法正确显示表单(Twitter Bootstrap - Can't get form to display properly)

bootstrap.min.js返回404错误,我相信这就是原因。 这是返回错误的URL: http : //aerofied.snbw.co/js/bootstrap.min.js 您还应该阅读Bootstrap文档 。 您必须为表单使用某些特定的类。 bootstrap.min.js returns a 404 error and I believe this is the reason. This is the URL that returns the error: http://aerof...

Twitter Bootstrap - 无法点击某些表单区域,但可以选中它们(Twitter Bootstrap - can't click on some form areas, but can tab to them)

尝试在form-horizontal添加form-horizontal类: <form class="form-signin form-horizontal" role="form" action="registration.php" method="post"> 看看你的html我发现你使用的是横向格式,但是你并没有完全遵循bootstrap 3文档 。 此外,您还要添加自己的额外css来影响col-md-x类的左右边距(这不是一个好主意),以使其看起来不错。 请仔细阅读文档中的示例,避免更改...

Bootstrap:表单显示(Bootstrap: Form display)

JSfiddle演示 您需要将网格类添加到前两个输入。 col-xs-6将输入分配给它们50%的宽度并将它们排成一行。 确保已将两个输入包裹在row以便下一个输入按原样对齐,而不会干扰流量。 text-center commentbox类的text-center类将按钮与中心对齐。 要减小两个输入框之间的空间,您需要将padding-left覆盖为0.请注意,我的目标是第二个输入,以便仅影响间距。 .comment-box .form-group.col-xs-6:nth-child(2) { ...

相关文章

更多

HttpClient PUT请求示例

本教程演示如何使用Apache HttpClient 4.5发出Http PUT请求。 HTTP PU ...

Solr: a custom Search RequestHandler

As you know, I've been playing with Solr lately, tr ...

A Great List of Windows Tools

Windowsis an extremely effective and a an efficient ...

按钮样式

网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接退出,如果将超链接的样式变成 ...

gwt 部署在div 中的问题。

按照这片文章(http://developerlife.com/tutorials/?p=231)将我 ...

Becoming a data scientist

Data Week: Becoming a data scientist Data Pointed, ...

trouble is a friend

trouble will find you no matter where you go, oh ...

[转]So You Want To Be A Producer

pro-du-cer n. 1. Someone from a game publisher who ...

Hadoop海量put时出现的socket超时导致put失败解决方案

当一个HDFS系统同时处理许多个并行的put操作,往HDFS上传数据 时,有时候会出现dfsclien ...

在列表li里两个浮动div兼容IE6问题

本来一个很简单功能,却难以兼容IE6, &lt;ul class=&quot;ulDiv&quot ...

最新问答

更多

获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)

我用Google搜索了一个解决方案。 “EnumDisplayModeProvider”是我自己设置网站的各种模式的枚举。 public EnumDisplayModeProvider GetDisplayModeId() { foreach (var mode in DisplayModeProvider.Instance.Modes) if (mode.CanHandleContext(HttpContext)) {

如何通过引用返回对象?(How is returning an object by reference possible?)

这相对简单:在类的构造函数中,您可以分配内存,例如使用new 。 如果你制作一个对象的副本,你不是每次都分配新的内存,而是只复制指向原始内存块的指针,同时递增一个也存储在内存中的引用计数器,使得每个副本都是对象可以访问它。 如果引用计数降至零,则销毁对象将减少引用计数并仅释放分配的内存。 您只需要一个自定义复制构造函数和赋值运算符。 这基本上是共享指针的工作方式。 This is relatively easy: In the class' constructor, you allocate m

矩阵如何存储在内存中?(How are matrices stored in memory?)

正如它在“熵编码”中所说的那样,使用Z字形图案,与RLE一起使用,在许多情况下,RLE已经减小了尺寸。 但是,据我所知,DCT本身并没有给出稀疏矩阵。 但它通常会增强矩阵的熵。 这是compressen变得有损的点:输入矩阵用DCT传输,然后量化量化然后使用霍夫曼编码。 As it says in "Entropy coding" a zig-zag pattern is used, together with RLE which will already reduce size for man

每个请求的Java新会话?(Java New Session For Each Request?)

你是如何进行重定向的? 您是否事先调用了HttpServletResponse.encodeRedirectURL()? 在这里阅读javadoc 您可以使用它像response.sendRedirect(response.encodeRedirectURL(path)); The issue was with the path in the JSESSIONID cookie. I still can't figure out why it was being set to the tomca

css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)

我认为word-break ,如果你想在一个单词中打破行,你可以指定它,这样做可以解决问题: .column { word-break:break-all; } jsFiddle演示。 您可以在此处阅读有关word-break属性的更多信息。 I think word-break, with which you can specify if you want to break line within a word, will do the trick: .column { word-break

无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)

我认为您忘记在分类时间内缩放输入图像,如train_test.prototxt文件的第11行所示。 您可能应该在C ++代码中的某个位置乘以该因子,或者使用Caffe图层来缩放输入(请查看ELTWISE或POWER图层)。 编辑: 在评论中进行了一次对话之后,结果发现在classification.cpp文件中错误地删除了图像均值,而在原始训练/测试管道中没有减去图像均值。 I think you have forgotten to scale the input image during cl

xcode语法颜色编码解释?(xcode syntax color coding explained?)

转到: Xcode => Preferences => Fonts & Colors 您将看到每个语法高亮颜色旁边都有一个简短的解释。 Go to: Xcode => Preferences => Fonts & Colors You'll see that each syntax highlighting colour has a brief explanation next to it.

在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)

你考虑过第三方拼写检查吗? 您可以将在C#中开发的自定义WinForms控件插入访问数据库吗? VB6控件怎么样? 如果你能找到一个使用第三方库进行拼写检查的控件,那可能会有效。 Have you considered a third party spell checker? Can you insert a custom WinForms controls developed in C# into an access database? What about a VB6 control? If

从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)

我有同样的问题,因为我在远程服务器上有两个图像,我需要在每天的预定义时间复制到我的本地服务器,这是我能够提出的代码... try { if(@copy('url/to/source/image.ext', 'local/absolute/path/on/server/' . date("d-m-Y") . ".gif")) { } else { $errors = error_get_last(); throw new Exception($err

从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))

我不确定我完全明白你在说什么。 你能编辑你的帖子并包含你正在做的Subversion命令/操作的特定顺序吗? 最好使用命令行svn客户端,以便容易为其他人重现问题。 如果您只是想获取文件的旧副本(即使该文件不再存在),您可以使用如下命令: svn copy ${repo}/trunk/moduleA/file1@${rev} ${repo}/trunk/moduleB/file1 其中${repo}是您的存储库的URL, ${rev}是您想要的文件的版本。 这将恢复该文件的旧版本,包括最高版本