如何将模态添加到现有文件? [英] How to add a modal to an existing file?
本文介绍了如何将模态添加到现有文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我昨天分别成功地制作了一个模式，因为我不想破坏其余的代码.我如何将其添加到现有的呢?这是编码文件.谢谢.
我尝试将模式代码放置在导航之后，但它破坏了整个网站.表单出现了，只是没有CSS.
在这里是我要放置模式的地方，当我单击锚标记"Acessar"时，希望它打开.我不知道将其放置在哪里，因为要打开它的按钮在导航栏中(是的，该按钮是锚标记，仍然需要更改它).
< body>< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"</script>< link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css"/>< nav><输入type ="checkbox" id ="check">< label for ="check">< i class ="fas fa-bars" id ="btn"></i>< i class ="fas fa-times" id ="cancel"></i></label>< img src ="logo-solo.png">< ul>< li>< a href =#home">Home< li>< li>< a href =#quem-somos"> Quem somos</a></li>< li>< a href =#onde-atuamos"> Onde Atuamos</a></li>< li>< a href =#servicos"> Servicos</a></li>< li>< a href =#Depoimentos"> Depoimentos</a></li>< li>< a href =#Comecando"> comecando</a></li>< li>< a href =#sac"> Contacte-nos</a></li>< a href ="https://www.instagram.com/mmtuniversity_oficial/" class ="fa fa-instagram" target ="_ blank"></a>< a href ="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class ="fa fa-youtube" target ="_ blank"></a>< a class ="cta" rel ="modal:open" href =#ex1" key ="login" id ="myBtn"> Acessar</a></ul></nav>< script type ="text/javascript">document.querySelectorAll('a [href ^ =#"]').forEach(anchor => {anchor.addEventListener('click'，function(e){e.preventDefault();document.querySelector(this.getAttribute('href')).scrollIntoView({行为:平稳"});});});</script>< section class ="container3" id ="home">< h1>< strong> Bem-vindoàMMT UNIVERSITY</strong></h1>< h2>Lorem ipsum dolor坐下，继续保持良好的上乘状态，塞德·杜伊斯莫德临时禁运和劳动大臣阿里夸.< br>尽量不要用普通的东西，而要进行无刺激性的锻炼，必须遵守的规定.ut aliquip得出的结果是commodo的结果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore< br>绝望的动物实验和//h2.</section> 这是我的模式代码(ps:最后一行，即按钮，将由导航栏上的那一行更改)
< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js></script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"</script>< link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css"/>< div id ="myModal">< div class ="container" id ="container">< div class ="form-container sign-up-container">< form action =#">< h1> MMT大学</h1>< span>服务注册//span>< input type ="text" placeholder =Usuário"/><输入type ="email"占位符="Email"/><输入type ="password"占位符="Senha"/><输入类型=密码"占位符="Repa a sua senha"/>< button>注册器</button></form></div>< div class ="form-container登录容器">< form action =#">< h1> Acessar</h1>< span>进入MMT大学</span><输入type ="email"占位符="Email"/><输入type ="password"占位符="Senha"/>< a href =#"> Esqueceu a senha?</a>< button> Acessar</button></form></div>< div class ="overlay-container">< div class ="overlay">< div class ="overlay-panel overlay-left">< h1> Bem vindo！</h1>< p>段落连续的aprendendo，进入sua conta！/p< button class ="ghost" id ="signIn">登录</button></div>< div class ="overlay-panel overlay-right">< h1> MMT大学！</h1>< p>在世界贸易中进行的准注册.</p>< button class ="ghost" id ="signUp"> Registre-se</button></div></div></div></div></div>< script src ="main.js"></script>< script src ="modal.js"></script>< button href =#ex1" rel ="modal:open" id ="myBtn"> Acessar</button> 还，我是否只需将模式文件的CSS粘贴到这些文件中?
谢谢.
这是我的代码的样子
如果是这样，那么它应该相对容易.首先，您需要将模式HTML与其余代码结合起来.将其添加到< section> 之后的主页末尾可能是有意义的.您不必添加两个< script> 标记和< link> 标记，除非它们与主页中已有的标记不同.
要使模式看起来更加美观，您需要将其放置在一个容器中，该容器充满整个页面，并且具有某种褪色的背景，如下所示:
请注意，模态的背景是如何变灰的.这很好地突出了模态.
为此，我们将div myModal 包裹在另一个div中，我将其称为 modalContainer .我们将对其应用一些样式以获取所需的背景，因此我们还需要添加一个CSS类(我将给该类一个非常聪明的名称，即 modal ).因此，您具有这种结构:
< body>...主页上模态之前的所有内容...< div id ="modalContainer"；class ="modal"< div id ="myModal"；class ="container">...模态的东西在这里</div></div>脚本和模态之后的东西</body> 还有CSS:
.modal {位置:固定；/*定位它以使其充满屏幕，但不随页面移动(滚动时，它不移动，但是页面在后台移动)*/最高:0;/*将此元素放在顶部... */左:0；/* ...页面的左上角... */宽度:100％;/* ...并设置宽度*/高度:100％;/* ...并将高度设为100％，以便元素填充整个屏幕*/z-index:99999；/*将z-index设置为足够高的数字，以使该元素位于所有其他元素的顶部*/背景:rgb(0，0，0，0.7);/*将背景设置为黑色并具有一定的透明度，这样您就可以看穿它*//*以下内容仅将模式放在此容器中居中*/显示:flex;证明内容:中心；align-items:居中;} 因此， modalContainer 跨越屏幕的整个高度和宽度，并且是模态的背景，而 myModal 容纳实际的模态.
现在，要正常运行，这需要对modal.js进行一些更改，即打开模式容器，而不仅仅是模式:
//获取模态var modal = document.getElementById("myModal");var modal_container = document.getElementById("modalContainer")modal_container.style.display ="none";window.onclick =函数(事件){console.log(event.target)if(event.target.id =="myBtn"){//如果单击该按钮，请打开模式容器modal_container.style.display ="flex"}else if(modal！== event.target&&！modal.contains(event.target)){//如果点击位于模式外部，则隐藏模式容器modal_container.style.display ="none";}} 现在它应该可以正常工作了.
完整的HTML代码:
< body>< script src =" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"</script>< script src =" https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"</script>< link rel ="stylesheet"href =" style.css"/>< nav><输入类型=复选框"；id ="check"< label for =检查">< i class ="fas fa-bars"id ="btn"/i.< i class ="fas fa-times"id =取消"/i.</label>< img src =" logo-solo.png">< ul>< li>< a href ="#home">Home</li>< li>< a href =#quem-somos"> Quem somos</a</li>< li>< a href =#onde-atuamos"> Onde Atuamos</a>/li>< li>< a href =#servicos"> Servicos</a</li>< li>< a href =#Depoimentos"> Depoimentos</a>/li>< li>< a href =#Comecando''> comecando</a</li>< li>< a href =#sac"> Contacte-nos</a</li>< a href =" https://www.instagram.com/mmtuniversity_oficial/"class ="fa fa-instagram"target ="_ blank"</a>< a href =" https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw"class ="fa fa-youtube"target ="_ blank"</a>< a class ="cta"rel ="modal:open"；href =#ex1"key ="login"id ="myBtn"＞ Acessar/a.</ul></nav>< script type =文本/javascript">document.querySelectorAll('a [href ^ ="##"]').forEach(anchor => {anchor.addEventListener('click'，function(e){e.preventDefault();document.querySelector(this.getAttribute('href')).scrollIntoView({行为:平稳"});});});</script>< section class ="container3".id ="home">< h1>< strong> Bem-vindoàMMT UNIVERSITY</strong></h1>< h2>Lorem ipsum dolor坐下，继续保持良好的上乘状态，塞德·杜伊斯莫德临时禁运和劳动大臣阿里夸.< br>尽量不要用普通的东西，不要打扰锻炼ullamco labisnisi br.ut aliquip得出的结果是commodo的结果.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore< br>绝望的动物实验和//h2.</section>< div class ="modal"id ="modalContainer"< div class =容器"；id ="myModal"< div class =表单容器注册容器">< form action =#">< h1> MMT大学</h1>< span>服务注册//span><输入类型=文本"；占位符=Usuário"/><输入类型=电子邮件"占位符=电子邮件"/><输入类型=密码"；占位符="Senha"/><输入类型=密码"；占位符="Repita a sua senha"/>< button>注册器</button></form></div>< div class =表单容器签入容器">< form action =#">< h1> Acessar</h1>< span>进入MMT大学</span><输入类型=电子邮件"占位符=电子邮件"/><输入类型=密码"；占位符="Senha"/>< a href =#"> Esqueceu a senha?</a>< button> Acessar</button></form></div>< div class ="overlay-container">< div class ="overlay">< div class ="overlay-panel overlay-left"< h1> Bem vindo！</h1>< p>段落连续的aprendendo，进入sua conta！/p< button class ="ghost"id ="signIn">登录</button></div>< div class ="overlay-panel overlay-right"< h1> MMT大学！</h1>< p>在世界贸易中进行的准注册.</p>< button class ="ghost"id ="signUp"＞ Registre-se</button></div></div></div></div></div>< script src =" main.js"</script>< script src ="modal.js""</script></body>
...但是模态卡在左下角:
- 决定命名模式容器类
modal对我来说是一个愚蠢的主意，因为jQuery似乎已经保留了该名称，并以其自己的样式覆盖了它.我应该看到的.无论如何，将其重命名为modal-container并相应地更新HTML可以解决此问题，但现在该模式跨越了 entire 页面:
- 这是因为由于某些原因，您的style.css中未包含
container类.我将其粘贴，因为它是正确构造模式的必需类:
- 您可能已经注意到，模态填充的右侧被弄乱了.这是因为
overlay-panel类中的填充规则.删除此结果将导致:
现在一切都会好起来的.
Repl.it链接: https://repl.it/@marsnebulasoup/UncommonIntentMolecule-1
I have successfully made a modal yesterday, separately, because I did not want to ruin the rest of my code. How do I add it to the existing one now? Here are the coding files. Thank you.
I have tried placing the modal code after the nav, but it just broke the whole website. The form showed up, just without the CSS.
Here is where I want to put the modal, I want it to open when I click the anchor tag "Acessar". I don't know where to put it, since the button who is going to open it is inside the navbar (yes, the button is the anchor tag, still have to change that).
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png">
<ul>
<li><a href="#home"> Home</a></li>
<li><a href="#quem-somos">Quem somos</a></li>
<li><a href="#onde-atuamos">Onde Atuamos</a></li>
<li><a href="#servicos">Servicos</a></li>
<li><a href="#Depoimentos">Depoimentos</a></li>
<li><a href="#Comecando">comecando</a></li>
<li><a href="#sac">Contacte-nos</a></li>
<a href="https://www.instagram.com/mmtuniversity_oficial/" class="fa fa-instagram" target="_blank"></a>
<a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fa fa-youtube" target="_blank"></a>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</nav>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<section class="container3" id="home">
<h1><strong>Bem-vindo à MMT UNIVERSITY</strong></h1>
<h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <br> ut aliquip ex ea commodo consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore <br> deserunt mollit anim id est laborum.</h2>
</section>
Here is my modal code (ps: the last line, the button, is to be changed by the one on the navbar)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div id="myModal">
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<a href="#">Esqueceu a senha?</a>
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
<button href="#ex1" rel="modal:open" id="myBtn">Acessar</button>
Also, do I just paste the CSS of the modal file into these ones?
Thank you.
EDIT:
This is what my code looks like
https://repl.it/repls/VastGorgeousPlot#index.html
I the modals button are not accessible, I cannot close it and the whole body becomes a modal behind this container.
解决方案
Is this what you are looking for?
If so, then it should be relatively easy. First you need to combine the modal HTML with the rest of your code. It'd probably make sense to add it to the end of the main page, after the <section>. You don't have to add the two <script> tags, and <link> tag though, unless they are different from what is in the main page already.
To make the modal nice looking, you need to place it in a container, which fills the entire page, and has a sort of faded background, like this:
Notice how the background of the modal is greyed out somewhat. This highlights the modal nicely.
To do this, we wrap the div myModal in another div, which I'm going to call modalContainer. We'll apply some styles to it to get that desired background, so we also need to add a CSS class (I'm going to give this class the very clever name of modal). So you have this sort of structure:
<body>
... everything before the modal on the main page ...
<div id="modalContainer" class="modal">
<div id="myModal" class="container">
... modal stuff goes here
</div>
</div>
... scripts and whatnot after the modal ...
</body>
And the CSS for this:
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with the page (when you scroll, it doesn't move, but the page moves in the background) */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire screen */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
So, modalContainer spans the complete height and width of the screen and is the background for the modal, while myModal houses the actual modal.
Now, to function properly, this requires some changes to modal.js, namely in opening the modal container, instead of just the modal:
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") { // If the button is clicked, open the modal container
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) { // If the click is outside the modal, hide the modal container
modal_container.style.display = "none";
}
}
Now it should work as desired.
Full HTML code:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="style.css" />
<nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png">
<ul>
<li><a href="#home"> Home</a></li>
<li><a href="#quem-somos">Quem somos</a></li>
<li><a href="#onde-atuamos">Onde Atuamos</a></li>
<li><a href="#servicos">Servicos</a></li>
<li><a href="#Depoimentos">Depoimentos</a></li>
<li><a href="#Comecando">comecando</a></li>
<li><a href="#sac">Contacte-nos</a></li>
<a href="https://www.instagram.com/mmtuniversity_oficial/" class="fa fa-instagram" target="_blank"></a>
<a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fa fa-youtube" target="_blank"></a>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</nav>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<section class="container3" id="home">
<h1><strong>Bem-vindo à MMT UNIVERSITY</strong></h1>
<h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <br> ut aliquip ex ea commodo consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore <br> deserunt mollit anim id est laborum.</h2>
</section>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<a href="#">Esqueceu a senha?</a>
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
EDIT: (for the problem mentioned in the comments, which has been deleted by SO)
There are a couple of problems with what you have.
- You aren't including the stylesheet, style.css (I'm not sure what it is named where you actually have your code, but in repl.it, the stylesheet is named style.css)
Fixing that results in:
...but the modal is stuck at the bottom left:
- Deciding to name the modal container class
modalwas a dumb idea on my part, because jQuery seems to already have reserved that name and is overriding it with its own styles. I should've seen that. Anyways, renaming it tomodal-containerand updating the HTML accordingly fixes this problem, but now the modal spans the entire page:
- That's because the
containerclass isn't included for some reason on your style.css. I pasted it over, because it is a required class to structure the modal correctly:
- You might have noticed that the right side of the modal's padding is messed up. This because of the padding rule in the class
overlay-panel. Removing this results in:
And all should be good now.
Repl.it link: https://repl.it/@marsnebulasoup/UncommonIntentMolecule-1
这篇关于如何将模态添加到现有文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
