javascript - Custom jQuery UI that doesn't have dialog and modal, needs a background overlay under the dialog box
问题描述
If I'm clicking on the second image with the pink background, a dialog appears. I need a background overlay under it which doesn't appear when I'm using modal: true because I have a customized library in my project. How can I add this background under the dialog box without using modal: true
?
$(function() {
$( "#dialog" ).dialog({
//modal: true,
autoOpen: false,
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);
$( "#dialog" ).dialog( "open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
解决方案
You need to move the dialog
event within the click function for dialog
to be initialized at the same when you the click
event occurs.
To change the background pink
you can either use CSS with !important
rule OR you can use addClass
to the your dialogue
when it opens.
Edit: Since you do not want the modal: true
option for your library
reasons. You can use addClass
and removeClass
of jQuery to add a custom modal to you body
and remove
the class
on dialogue
close.
Live Working Demo: (Both images showing dialogue with pink
background modal)
$(function() {
$(".images").find("a").on('click', function(e) {
e.preventDefault();
//dialog box
$("#dialog").dialog({
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
}).dialog("open");
//Href
setTimeout(() => {
// window.location.href = $(this).prop("href");
}, 5000);
});
});
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: pink;
opacity: 1;
overflow: auto;
}
#dialog {
display: none;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
推荐阅读
- lua - tonumber 返回 nil,我找不到解决方案
- php - 创建一个包含电子邮件的数组
- latex - 文章在使用 LaTeX 时被剪切。关于布局
- css - 悬停时将“查看篮子”按钮文本颜色更改为白色(带有 Woocommerce 的 Wordpress)
- python - 使用对单元格值的 groupBy 操作将一个数据帧转换为另一个数据帧
- html - 哪种方式效果更好?html链接到文件
- c++ - 容器 std::array 的列表初始化需要双括号
- python - ERRNO 22 - Python - 无效参数 - 为什么这条路径会导致我的错误处理脚本出错?
- haskell - 在 haskell 中使用自定义数据类型
- javascript - 绑定的输入值未出现在请求中