我当前正在尝试创建一个在页面加载时显示的弹出窗口。我看到弹出窗口的内容,但它只是在页面的顶部(欢迎来到我的网站!),而不是在页面加载后显示的新弹出窗口。任何想法为什么它不起作用?我尝试了来自堆栈溢出和网站教程的各种建议,但似乎没有任何效果我的 html/js 东西:<html><head> <link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css"/> <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-punk.min.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script type="text/javascript" src="tooltipster.bundle.min.js"></script> <script> function PopUp(){ document.getElementById('ac-wrapper').style.display="none"; } $(document).ready(function() { $('.tooltip').tooltipster({ theme: 'tooltipster-punk', 'maxWidth': 270, // set max width of tooltip box contentAsHTML: true, // set title content to html trigger: 'custom', // add custom trigger triggerOpen: { // open tooltip when element is clicked, tapped (mobile) or hovered click: true, tap: true, mouseenter: true }, triggerClose: { // close tooltip when element is clicked again, tapped or when the mouse leaves it click: true, scroll: false, // ensuring that scrolling mobile is not tapping! tap: true, mouseleave: true } }); setTimeout(function(){ PopUp(); },5000); // 5000 to load it after 5 seconds from page load});</script></head><body> <div id="ac-wrapper"> <div id="popup"> <center> <h2> welcome to my website! </h2> </center> </div></div> (the rest of my html content)这是我的样式文件:....#ac-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,.6);z-index: 1001;}
1 回答
慕丝7291255
TA贡献1859条经验 获得超6个赞
您很接近,您通过将弹出窗口设置为默认显示来翻转逻辑,并将其删除而不是显示。Popup()
function PopUp() {
// display content by setting display to "block"
document.getElementById('ac-wrapper').style.display = "block";
}
#ac-wrapper {
display: none; // content not displayed by default
...
}
添加回答
举报
0/150
提交
取消
