将内容放入JS弹出div中。 JS的奇怪问题

时间:2015-04-01 20:50:31

标签: javascript html css

我遇到了将内容放入弹出框的问题。我有两个按钮,但没有更多,没有别的东西不会工作,例如文字。

这是整个html文档

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/style.css" type="text/css"/>
</head>
<body>

<center><img id="header" src="../img/hemsidotitle.png"></img></center>
<div id="shadow">
    <div id="navbar">
        <a id="navbar-button" href="../index.html" style="border-radius: 5px 0px 0px 0px">Hem</a>
        <a id="navbar-button" href="../donera.html">Donera</a>
        <a id="navbar-button" href="#">Kits</a>
        <a id="navbar-button" href="#" style="border-radius: 0px 5px 0px 0px">Kontakta</a>
    </div>
    <div id="main-container">
        <a onclick="myFunction()" id="kit-drake" class="kit">Click here</a>
        <div id="somethingelse">
        </div>
            <script>
                function submit(){
                    document.getElementById('demo').innerHTML = '<div id="kit-drake-popup" class="pay">TEST<input type="button" id="cancel-button" value="Köp Nu" onClick="submit()">TEST</input>test </div>';

                }
            </script>
            <div id="demo"></div>
            <script>
                function myFunction() {
                    document.getElementById("demo").innerHTML = '<div id="kit-drake-popup" ><input type="button" id="cancel-button" value="Avbryt" onClick="submit()"><a id="pay-button" href="#">Köp Nu</a> </div>';
                }
            </script>

        </div>
        </div>
        </div>
    <div id="content-center">
    </div>
</body>
</html>

所以这就是按下锚点时的样子:

enter image description here

我想要的只是灰色按钮关闭弹出窗口,绿色按钮关闭另一个页面,然后能够放入其他div和内容,例如弹出div中的文本(kit-drake-popup) )。这可以通过简单的方式完成吗?

1 个答案:

答案 0 :(得分:1)

您可以使用字符串连接将文本放入弹出窗口。

function submit() {
  document.getElementById('demo').innerHTML = '<div id="kit-drake-popup" class="pay">TEST<input type="button" id="cancel-button" value="Köp Nu" onClick="submit()">TEST</input>test </div>';

}

function myFunction(text) {
  document.getElementById("demo").innerHTML = '<div id="kit-drake-popup" >' + text + '<br><input type="button" id="cancel-button" value="Avbryt" onClick="submit()"><a id="pay-button" href="#">Köp Nu</a > </div>';
}
<div id="shadow">
  <div id="main-container">
    <a onclick="myFunction('<div style=\'background-color: yellow; color: blue\'>This is blue text on yellow background.</div>'); return false;" id="kit-drake" class="kit">Click here</a>
    <div id="somethingelse">
    </div>
    <div id="demo"></div>


  </div>
</div>
<div id="content-center">
</div>