Question

亲爱的，我正在关注youtube.com https://www.youtube.com/watch?v=7dq_hDsHbkM上的教程。在html（.html）文件中，当我按照教程操作时，代码可以正常工作。它展示了如何使用Javascript和css制作弹出菜单。是否可以在MVC应用程序中使用.cshtml而无需使用nust包中的bootstrap或下载文件？我希望能够编写自己的对话框，其中包含一个表单。对不起，我对javascript很新。提前致谢这是我在.cshtml文件中尝试做的事情

<body>
<button id="button" onclick="openPopMenu()">
    Toggle popup menu!!
</button>
<div id="popup_bg">
    <div id="popup_main_div">
        <p id="javascript_magic">
            This is the magic of Javascript
        </p>
        <p id="javascript_desc">
            Learn how to create this professional <br /> popup menu with Javascript in the video!!1
        </p>
        <div id="close_popup_div" title="Close this popup menu" onclick="closePopupMenu()">
            <p>
                X
            </p>
        </div>
    </div>
</div>

<script type="text/javascript">
    var mypopupDiv = document.getElementById("popupdialog");

    function openPopupMenu() {
        mypopupDiv.style.display = "block";
    }

    function closePopupMenu() {
        mypopupDiv.style.display = "none";
    }

</script>

我的CSS文件如下

#popupdialog {
position:fixed;
top:0;
left:0;
background-color: rgba(0,0,0,0.7);
width:100%;
height:100%;
display:none;
}

#popup_main_div {
position:fixed;
width:800px;
height:500px;
border: 2px solid black;
border-radius: 5px;
background-color: white;
left:50%;
margin-left:-400px;
top: 50%;
margin-top:-250px;
}

#javscript_magic {
text-align:center;
font-family:sans-serif;
font-size:30px;
background-color:lightyellow;
padding-top:10px;
padding-bottom:10px;
margin-top:0;
border-bottom: 2px solid black;
}

#javascript_desc {
font-family: sans-serif;
text-align: center;
margin-top: 80px;
}

Answer 1

您的javascript正在寻找HTML中不存在的#popupdialog div。你的按钮试图运行一个名为“openPopMenu”的功能，需要将其改为“openPopupMenu”

var mypopupDiv = document.getElementById("popupdialog");

    function openPopupMenu() {
        mypopupDiv.style.display = "block";
    }

    function closePopupMenu() {
        mypopupDiv.style.display = "none";
    }

#popupdialog {
position:fixed;
top:0;
left:0;
background-color: rgba(0,0,0,0.7);
width:100%;
height:100%;
display:none;
}

#popup_main_div {
position:fixed;
width:800px;
height:500px;
border: 2px solid black;
border-radius: 5px;
background-color: white;
left:50%;
margin-left:-400px;
top: 50%;
margin-top:-250px;
}

#javscript_magic {
text-align:center;
font-family:sans-serif;
font-size:30px;
background-color:lightyellow;
padding-top:10px;
padding-bottom:10px;
margin-top:0;
border-bottom: 2px solid black;
}

#javascript_desc {
font-family: sans-serif;
text-align: center;
margin-top: 80px;
}

<body>
<button id="button" onclick="openPopupMenu()">
    Toggle popup menu!!
</button>
<div id="popupdialog">
  <div id="popup_bg">
      <div id="popup_main_div">
          <p id="javascript_magic">
              This is the magic of Javascript
          </p>
          <p id="javascript_desc">
              Learn how to create this professional <br /> popup menu with Javascript in the video!!1
          </p>
          <div id="close_popup_div" title="Close this popup menu" onclick="closePopupMenu()">
              <p>
                  X
              </p>
          </div>
      </div>
  </div>
</div>

.cshtml文件中的CSS和Javascript

1 个答案: