CODEWITHSUNDEEP
javascriptjqueryhtml
Levi
Levi

Reputation: 317

How to insert text into a formated popup window with javascript?

The following code works but it replaces the whole new window.

var v = window.open("popup.html" ... ); w.document.body.write("asd");

I have a 

<div id="insert-here"></div>

in my popup.html and I want to insert the text that I want here.

This code is not working and I tried 3 other different methods but with no luck:

$(w.document.body).find("#insert-here").append(msg);

How can I achieve it? I want to avoid creating a whole html page with css in javascript.

Upvotes: 1

Views: 3332

Answers (3)

davidpm4
davidpm4

Reputation: 582

Dunno if this is what you're looking for. Just input the url to your popup and link up the same css page. You can obviously adjust the size to fit your needs. 

function showPopup(url) {
            var newwindow=window.open(url,'name','height=220,width=560,top=200,left=300,resizable');
            if (window.focus) {
                newwindow.focus()
            }
        }

EDIT/UPDATE: Try with an overlay?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> blah </title>
</head>
<body>
<div id="copyme">hi there</div>
<button>click</button>
<script>
(function() { 
var copyme = document.getElementById('copyme').innerHTML;
    document.querySelector('button').addEventListener('click', function(e) {
        e.preventDefault();
    var overlayDiv = document.createElement('DIV'),
        overlay = overlayDiv.style; // DRY
        overlayDiv.id = 'overlay';
        overlay.height = window.innerHeight + "px";
        overlay.width = window.innerWidth + "px";
        overlay.top = window.pageYOffset + "px";
        overlay.left = window.pageXOffset + "px";
        overlay.background = 'rgba(0,0,0,0.8)';

    var popup = document.createElement('DIV'),
        popupCopy = document.createTextNode(copyme);
        popup.classList.add('popup');
        popup.style.color = 'white';
        popup.appendChild(popupCopy);

        overlayDiv.appendChild(popup);
        document.body.appendChild(overlayDiv);
    }, false);
})();
</script>
</body>
</html>

Its ugly, but you can add resize or scroll listeners and style up the inner DIV to look the way you want. That's all I got!

Upvotes: 0

Levi
Levi

Reputation: 317

Okay so I found something else:

in my popup.html I need to have a little javascript code:

$( document ).ready(function() {
        console.log( "ready!" );
        $("#insert-here").append(opener.msg);
    });

This opener will find the variable msg from my main.js file that saves text from an input field.

Upvotes: 0

Anthony
Anthony

Reputation: 906

Could you make use of jQuery UI dialog? https://jqueryui.com/dialog/

You can have a div with some info in it:

<div id="dialog" title="Basic dialog" style="display: none;">Some information</div>

Then your jQuery can handle it accordingly:

$('#dialog').dialog();
$('#dialog').html("some other info");

See this jsfiddle for an example: http://jsfiddle.net/gL3uZ/1/

Upvotes: 1

Related Questions