发表新帖
发表新帖

Why won't my JavaScript open this modal box?

后端 未结
关注
4 443
没有蜡笔的小新
没有蜡笔的小新 2021-01-20 22:54

I\'m trying to call up a click element to open up a modal box, and i\'m unsure what I\'m doing wrong.

I\'ve done basic debugging, but I\'m still relatively new to this,

相关标签:
4条回答
  • 南笙
    2021-01-20 23:25 
    #teal {
  height: 100px;
  width: 100px;
  background-color: red;

    }

    Block Level Elements like <div> typically need to have their dimensions defined unless they are going to expand to their inner content. You need to define a height and width to the div inside the anchor tag in order to create a clickable area. Right now your button is essentially 0h x 0w.

    Additional tip: you can get rid of the <div> inside the anchor and just apply display:block to it, as well as define the height and width. That will keep your HTML as simple as it needs to be.

    0 讨论(0)
  • 心在旅途
    2021-01-20 23:30

    That happens because click onto <a> tag forces browser to follow provided link. So page reloads.

    var focus = document.getElementById("teal");
var modal = document.getElementById("bg-modal");

if (focus) {
focus.addEventListener("click", function(event) {
    event.preventDefault();
    modal.style.display = "flex";
  });
}

    I also saw your duplicate question, where you provided <head> tag. Move javascript file import from top of the <head> tag to bottom of the <body> tag

    0 讨论(0)
  • 暗喜
    2021-01-20 23:40

    You have a click handler on your <div id="teal" /> but it doesn't give the user any way to click it

    Add this css snippet and you should be able to click the element

    #teal {
  height: 50px;
  width: 50px;
  background-color: blue;
}
    0 讨论(0)
  • 猫巷女王i
    2021-01-20 23:50

    I think your problem is this,

    <a id = "teal-link" href = "">
 <div id = 'teal'>
 </div>
</a>

    You have wrap your div with anchor tag with href="". By pressing on div your page is getting refreshed. You need to do this,

    <a id = "teal-link" href = "#">  //Add # here
 <div id = 'teal'>
 </div>
</a>

    Demo

    0 讨论(0)
 看不清?
提交回复
热议问题