修复这个javascript代码项目 [英] Fix this javascript code project

问题描述

我正在尝试使用CSS和javascript构建一个模态弹出窗口，但显示模式框的按钮似乎没有触发javascript来显示modsl窗口（div），我不知道为什么。好的，我做了一些更改，并显示了模式弹出窗口，但现在它立即显示，并且不等待按钮被点击。现在我似乎无法将模式的标题部分缩短。

http ：//jsfiddle.net/zipster1967/uxLojjps

我从w3schools.com的示例中获得了这个结构，并在对CSS进行了一些修改并添加了相当多的结构之后对于HTML文件，模态不会像在示例上那样做。请问有谁可以告诉我我犯了哪些错误，或者不知道他们在哪里？



我尝试了什么：



我从w3schools.com的例子开始，如下：

http://www.w3schools .com / howto / tryit.asp？filename = tryhow_css_modal2

I am trying to build a modal popup window using CSS and javascript but the button to display the modal box doesn't seem to be firing the javascript to display the modsl window (div) and I am not sure why. Okay I made some changes and got the modal popup to display but now it displays right away and doesn't wait for the button to be clicked. And now I can't seem to make the header part of the modal any shorter.
http://jsfiddle.net/zipster1967/uxLojjps
I got the structure for this from the example in w3schools.com and after making some modifications to the CSS and adding quite a bit of structure to the HTML file the modal doesn't do what it does on the example. Please can anyone tell me where I have made my mistake or if more than one where they are?

What I have tried:

I started with the example from w3schools.com which is as follows:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

推荐答案

在你的CSS中

In your css

t
.modal {
    display: none; /* Hidden by default */

这适用于在元素t中有类modal的任何东西，并且它与你的模态框不匹配，因为它不在元素t中。所以改成它

this is applied to anything with class "modal" inside an element "t", and that doesn't match your modal box as it isn't inside an element "t". So change it to this

.modal {
    display: none; /* Hidden by default */

即摆脱t行

ie get rid of the "t" line

在玩了一下CSS后，我发现了正确的边距，填充和边框设置，以获得我想要的尺寸。此外，我意识到我有近距离和标题在div中占据不同的垂直位置。一旦我通过浮动标题div来组合它们，它们就可以存在于同一个垂直空间中。

After playing with the CSS a bit I discovered the correct margin, padding, and border settings to get the size where I want it. Also I realized that I had the close span and the header occupying differnt vertical positions in the div. Once I combined them by floating the header div they could exist in the same vertical space.

这篇关于修复这个javascript代码项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！