CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Sergiodiaz53
Sergiodiaz53

Reputation: 1288

Popup in a external window

I'm using Bootstrap & jQuery to develop an application and I need to show a div which contains two tables on a popup. Until now I have use the modal plugin from bootstrap but now I have the need of show it in a external and floating 'small' (~800x600) window, which I can close, minimize, etc.

I have been searching how to do it but only found this plugin which works with urls: jquery.popupWindow.js (http://swip.codylindley.com/popupWindowDemo.html but what I need is to show the content of a div (The idea is generate programmatically two tables, append it to a div, and show it in a external window)

Anyone could help me? Thanks in advance.

Upvotes: 0

Views: 673

Answers (2)

DavidRothbauer
DavidRothbauer

Reputation: 121

To accomplish this, I use a div within the main page.

This is the HTML placed just before the body close tag

<div id="popup">
<div id="popupcontent">
 </div>
</div>

This is the css

#popup {
    display:none;
    position: fixed;
    width:auto;
    height:auto;
    top:13%;
    left:40%;
    background-color:#FFF;
    border:#0073EA solid 4px;
    border-radius:10px;
    overflow:auto;
    padding:20px;

}

When populating and displaying a div like this from a jquery event handler, your code will look something like this:

$('#mybutton').click(function(e) {  

  var popupdata = "Some latin stuff used as a placeholder";

  $('#popupcontent').html(popupdata);

   $('#popup').show();


});

Hopefully this helps.

Upvotes: 0

void
void

Reputation: 36703

Giving you the idea, Assume their are two windows parent.html and child.html

in parent.html:

<script type="text/javascript">
    $(document).ready(function () {
        var output = "data";
        var OpenWindow = window.open("child.html", "mywin", '');
        OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html
        OpenWindow.init();
    });
</script>

in child.html:

<script type="text/javascript">
    var dataFromParent;    
    function init() {
        document.write(dataFromParent);
    }
</script>

Upvotes: 1

Related Questions