---
title: "class i popup"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/117742-class-i-popup"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Web-Tor"
published: "2004-12-10T10:00:39.000Z"
updated: "2004-12-13T09:21:33.000Z"
replies: 5
views: 287
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/117742-class-i-popup"
---

# class i popup

## #1 — Web-Tor, 2004-12-10T10:00Z

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>
```

Permalänk: https://www.webforum.nu/p/117742

## #2 — Peter S, 2004-12-12T09:37Z

```
<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).

 :)

Permalänk: https://www.webforum.nu/p/1506000

## #3 — Web-Tor, 2004-12-13T07:49Z

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.

Permalänk: https://www.webforum.nu/p/1506323

## #4 — Peter S, 2004-12-13T08:03Z

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);
}
```

 :)

Permalänk: https://www.webforum.nu/p/1506326

## #5 — Web-Tor, 2004-12-13T08:42Z

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

Permalänk: https://www.webforum.nu/p/1506333

## #6 — Web-Tor, 2004-12-13T09:21Z

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);
```

Permalänk: https://www.webforum.nu/p/1506347

---

Tråden på webben: https://www.webforum.nu/amne/javascript/117742-class-i-popup
