gpt4 book ai didi

javascript - 如何将 "x"关闭按钮添加到 uk-modal 弹出窗口的右上角?

转载 作者:行者123 更新时间:2023-11-27 23:56:53 26 4
gpt4 key购买 nike

我正在尝试将小的“x”关闭按钮添加到 uk-modal 弹出窗口的右上角。我怎样才能正确添加它的 php 代码和 css,也许还有它的 javascript?

我尝试将以下 1、2 个代码添加到 3 个代码块中:

1) 我添加的第一个代码:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

2) 添加了第二个代码:

<div id="my-id">
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close></button>
</div>
</div>

<div id="my-id">
<div class="uk-modal-dialog">
<button class="uk-modal-close-outside" type="button" uk-close></button>
</div>
</div>

3) 弹出窗口的代码块:

   <div class="uk-modal-dialog">
<div class="uk-modal-header">
<h2><?php echo esc_attr_e( $options['popuptitle'] ); ?></h2>
</div>
<div class="uk-modal-content"><?php echo stripslashes( $options['popuptext'] ); ?></div>
<div class="uk-modal-footer">
<button id="button1" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton1style'] ); ?><?php if( $options['popupbuttonoptions'] != 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton1text'] ); ?></button>
</div>
</div>
</div>

我希望在弹出窗口中获得“x”关闭按钮的真实位置,但它的位置不正确,也无法关闭模态弹出窗口。

我希望得到它如下图所示:

如何修复?

example x button

最佳答案

看看对你有没有帮助:

.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}

.topright {
position: absolute;
right: 0;
top: 0
}
<header style="background-color:#000;color:#fff;">
<span onclick="document.getElementById('YourModalBox').style.display='none'" class="close-button topright">&times;</span>
</header>

不要忘记将“YourModalBox ”设置为您的模态框 id , 并将其应用于模态框的标题,因此它位于 <div> 内并停留在右上角。

来 self 仍在开发的 Web 应用程序的一个实例(请注意,它不会正确显示,因为我没有发布整个 body HTML,它太长而且与回答:

// When the user clicks anywhere outside of the modal, close it	
window.addEventListener('click', function(event) {
if (event.target == document.getElementById('mod_mec')) {
document.getElementById('mod_mec').style.display = "none";
}

if (event.target == document.getElementById('mod_therm')) {
document.getElementById('mod_therm').style.display = "none";
}
});
#btn_menu {
background-color: #000;
}

#btn_menu:hover {
animation-name: change;
animation-duration: 0.6s;
}

@keyframes change {
from {
background-color: #000
}
top {
background-color: #777
}
}

#subs {
opacity: 0.7;
}

#subs:hover {
cursor: pointer;
opacity: 1;
animation-name: hovering;
animation-duration: 0.6s;
}

@keyframes hovering {
from {
opacity: 0.7;
}
top {
opacity: 1;
}
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<div class="w3-row-padding">
<div class="w3-col l3 m6 w3-margin-bottom">
<div id="subs" class="w3-display-container" onclick="document.getElementById('mod_mec').style.display='block'">
<div class="w3-display-topleft w3-black w3-padding">Mechanics</div>
<img src="_img/sub_bg.jpg" style="width:100%">
<div class="w3-display-middle w3-light-grey w3-padding">
V<sub>avg</sub> = &Delta;s &div; &Delta;t
</div>
</div>
</div>
<div id="mod_mec" class="w3-modal">
<div class="w3-modal-content w3-animate-top w3-card-4">
<header class="w3-container w3-black">
<span onclick="document.getElementById('mod_mec').style.display='none'" class="w3-button w3-display-topright">&times;</span>
<h2>Choose a topic</h2>
</header>

<!-- VELOCITY -->
<div class="w3-col l3 m6 w3-margin-bottom">
<a href="velocity.html">
<div id="subs" class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Velocity</div>
<img src="_img/sub_bg.jpg" alt="House" style="width:100%">
<div class="w3-display-middle w3-light-grey w3-padding">
V<sub>avg</sub> = &Delta;s &div; &Delta;t
</div>
</div>
</a>
</div>
</div>

关于javascript - 如何将 "x"关闭按钮添加到 uk-modal 弹出窗口的右上角?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56210419/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com