是否有HTML5的替代方案来代替JS的弹窗？我从未涉足过JS或其他脚本/代码，仅熟悉HTML5和CSS3（我真的很注重语义 :））。
如果没有也没关系，只是好奇而已。
谢谢！ Jess
HTML5是否有JS警告框的替代方案？
4
- user3275593
6
你是否在寻找类似模态框的东西？ - laaposto
3HTML5并没有完全取代JavaScript。 - njzk2
1有警报模拟器，包括由JavaScript操作的HTML元素，但没有直接等效物。JavaScript和HTML扮演不同的角色。 - Alex K.
即使使用JavaScript，也无法完全复制警告框的行为。 - Pekka
你可以在HTML的容器中创建一个弹出窗口，该容器具有CSS的“hidden”属性，并使用一些非常轻量级的JS来隐藏和显示它。这样是否符合您的需求？ - aaron-bond
谢谢大家，提供了一些有趣的想法和方向供我参考，非常感谢你们抽出时间回复。祝你们有美好的一天 :) - user3275593
3个回答
7
HTML5是一个平台和品牌，它包括了许多JavaScript API、CSS3模块等。例如，可以尝试使用:target CSS3 示例来弹出警告框，这个示例使用了CSS3的顶级功能。
代码来自于CodePen:
HTML
<div class="wrap">
<h1>Modal - Pure CSS (no Javascript)</h1>
<p>Example of modal in CSS only, here I use the pseudo selector ":target" and no javascript for modal action.</p>
<p>This works in IE9+ and all modern browsers.</p>
<p>View <a href="http://www.felipefialho.com/css-components/">Pure CSS Components</a> project.</p>
<hr />
<a href="#modal-one" class="btn btn-big">Modal!</a>
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
<a href="#" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Nice!</a>
</div>
</div>
</div>
<!-- /Modal -->
CSS
body {
color: #333333;
font-family: 'Helvetica', arial;
}
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaaaaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eeeeee solid 1px;
text-align: right;
}
编辑:
Chrome Canary 37+有dialog元素。更多信息请参见代码示例。它的主要优点是show，close和showModal方法以及用于背景的::backdrop css选择器。
- Pinal
2
不，没有任何方法可以显示不使用任何JavaScript的弹出窗口（至少没有实用的方法）。这是因为您需要某种代码来管理弹出窗口的消息，甚至使弹出窗口出现。
仅使用CSS的示例依赖于用户点击某个内容以显示弹出窗口。
您可以查看jQueryUI 的模态框。但那是HTML / CSS / JS的组合。
仅使用CSS的示例依赖于用户点击某个内容以显示弹出窗口。
您可以查看jQueryUI 的模态框。但那是HTML / CSS / JS的组合。
- Cerbrus
4
3实际上这似乎是可能的。http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ - njzk2
@njzk2：好吧，我会被诅咒的。
模态框具有静态内容，并且必须由用户激活。对我来说似乎不太实用。 - Cerbrus
是的，这个 :target 看起来确实非常强大。 - njzk2
@njzk2 那个方法很不可靠且不切实际。它使用页面刷新来运行并破坏了浏览器历史记录。 - Justin Kyle Parton
0
如果你不想使用alert()，最好的选择是从头开始编写一个。有很多库可以帮助你完成这个任务，稍微找一下，你至少会找到一个。
- Zoey Mertes
1
4他在问题中表示自己没有 JavaScript 经验——为什么要编写一个全新的模态弹出窗口实现呢？将其作为最佳选项？ - aaron-bond
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接