为了账号安全,请及时绑定邮箱和手机立即绑定

Javascript 弹出没有弹出?

Javascript 弹出没有弹出?

繁星淼淼 2022-08-18 16:31:14
我当前正在尝试创建一个在页面加载时显示的弹出窗口。我看到弹出窗口的内容,但它只是在页面的顶部(欢迎来到我的网站!),而不是在页面加载后显示的新弹出窗口。任何想法为什么它不起作用?我尝试了来自堆栈溢出和网站教程的各种建议,但似乎没有任何效果我的 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

  ...

}


查看完整回答
反对 回复 2022-08-18
  • 1 回答
  • 0 关注
  • 195 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号