Web-TorMedlem sedan nov. 200013 890 inlägg Jag försöker få in ett class-namn i en popup. Jag vill använda funktionen window.createPopup.
Jag har försökt på två olika sätt (de bortkommenterade raderna i koden) men ingen av dom funderar.
Fungerar inte = Ger inte något felmeddelande men påverkar inte utseendet på bakgrunden.
<html>
<head>
<script>
var oPopup = window.createPopup();
function ButtonClick(){
var oPopBody = oPopup.document.body;
// oPopBody.setAttribute('className','test')
// oPopBody.className='test';
oPopBody.innerHTML = "Click outside <b>popup</b> to close.";
oPopup.show(100, 100, 180, 25, document.body);
}
</script>
<style>
.test{background:#369;}
</style>
</head>
<body>
<button onclick="ButtonClick()">Click Me!</button>
</body>
</html>
Peter SMedlem sedan dec. 20025 483 inlägg <html>
<head>
<script>
var oPopup = window.createPopup();
function ButtonClick(){
var popdoc = oPopup.document;
popdoc.open();
popdoc.write("<head><style type='text/css'>.test{color:red;} body{ border:0; overflow:hidden }<\/style><\/head>");
popdoc.write("<body>Click outside <b>popup</b> to close.<\/body>");
popdoc.close();
popdoc.body.setAttribute("className","test");
oPopup.show(100, 100, 180, 65, document.body);
}
</script>
<style>
.test{background:#369;}
</style>
</head>
<body>
<button onclick="ButtonClick()">Click Me!</button>
</body>
</html>
Problemet med denna lösning är att document.write() av någon anledning orsakar en vertikal scrollbar (därav overflow:hidden).
:)
Web-TorMedlem sedan nov. 200013 890 inlägg Okey, det var ju ett sätt. Fast det innebär ju att jag måste skriva samma information på två ställen.
Då är det nästan enklare att skriva:
objPopBody.style.border="1 solid #888888";
objPopBody.style.fontFamily="verdana";
objPopBody.style.backgroundColor="#ffffff";
...o.s.v.
Jag skulle vilja använda samma classer som finns i min vanliga CSS just för att slippa redundant CSS-information.
Peter SMedlem sedan dec. 20025 483 inlägg Testa detta istället:
function ButtonClick(){
var popdoc = oPopup.document;
popdoc.open();
popdoc.write("<head><style type='text/css'>body{ border:0; overflow:hidden }<\/style><\/head>");
popdoc.write("<body>Click outside <b>popup</b> to close.<\/body>");
popdoc.close();
popdoc.styleSheets[0].addImport("foo.css");
popdoc.body.setAttribute("className","test");
oPopup.show(100, 100, 180, 65, document.body);
}
:)
Web-TorMedlem sedan nov. 200013 890 inlägg Visst! Det funkar. Det tar visserligen en stund att importera css-filen varje gången men jag får väl bryta ur den här classen och lägga i en egen fil.
Nu till nästa lilla problem:
Texten som ska visas i popupen vill jag läsa in från själva HTML-filen på det här sättet:
<html>
<head>
<script>
var oPopup = window.createPopup();
function ButtonClick(element){
var oPopBody = oPopup.document.body;
oPopBody.innerHTML="<div style='border:1px solid #555;padding:2'>"+element.lastChild.innerHTML+"</div>";
oPopup.show(100, 100, 180, 50, document.body);
}
</script>
</head>
<body bgcolor="#DDDDDD">
<button onclick="ButtonClick(this)">Click Me!
<div style="display:none;">Text i popup kommer här.</div>
</button>
</body>
</html>
Problemet är att få rätt höjd på popupen. Jag vill ju inte hårdkoda in 50 som jag har gjort i det här fallet. :l
Web-TorMedlem sedan nov. 200013 890 inlägg Hittade följande fullösning på MS hemsida:
objPop.show(0, 0, 300, 0);
var realHeight = objPopBody.scrollHeight;
objPop.hide();
objPop.show(100,100, 150, realHeight,document.body);
