我遇到了将内容放入弹出框的问题。我有两个按钮,但没有更多,没有别的东西不会工作,例如文字。
这是整个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>
所以这就是按下锚点时的样子:
我想要的只是灰色按钮关闭弹出窗口,绿色按钮关闭另一个页面,然后能够放入其他div和内容,例如弹出div中的文本(kit-drake-popup) )。这可以通过简单的方式完成吗?
答案 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>