How to create DOM windows in JavaScript?

I have a chatroom application. I am using following code for private chat. I am using window.open function but by most of browser popup is getting blocked so I want to use DOM WINDOWS instead of windows, can anybody tell me how I can do that?

    <script language="javascript">
    <!--
    function popUp(URL) {
      var Win = window.open(URL, '<?php echo $got_request['id'];?>', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resiza开发者_JS百科ble=1,width=650,height=530,left=212,top=134');
}

    popUp("../private.php?s=<?php echo $got_request['username'];?>&room=<?php echo $got_request['roomname'];?>");
// -->

 </script>

There's a jQuery plugin called DOM Window that can help you acheive what you want.

Realistically there's no such thing as a DOM Window, it's purely a part of the page that's styled to look like a new window. Anyhow, this plugin may be what you're looking for.

http://swip.codylindley.com/DOMWindowDemo.html

Given your requirements, it's likely you'll want to use the DOM Window with an (dare I say it) iframe.

A "DOM window" in the sense I think you mean is just an element on the page, frequently a div. You can position it anywhere on the page you like in a variety of ways, including absolute positioning.

(Edit: Blast, I missed that you had a jquery-ajax tag on your post, which suggests to me that you're using jQuery. The below could have been a lot shorter. Ah, well...)

There are lots of libraries out there to do these sorts of lightweight windows for you. The usual terms are "lightbox" or "dialog". For jQuery (now that I've seen the tag), you might look at jQuery UI, which has this and a lot of other handy things.

Here's an example of how you can do that (live copy):

HTML:

<input type='button' id='btnPop1' value='Show Popup 1'>
<br><input type='button' id='btnPop2' value='Show Popup 2'>
<div id="pop1" style="display: none">
  <p>I'm the first pop-up. My content is already in the DOM,
  but hidden via a <code>display: none</code> style until
  I'm triggered.</p>
  <p>Click me to close</p>
</div>

CSS:

#pop1 {
  position: abolute;
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  margin-left: 10%;
  margin-top: 10%;
  border: 1px solid #aaa;
  background-color: #eee;
}
#pop2 {
  position: abolute;
  left: 50%;
  top: 25%;
  width: 40%;
  height: 20%;
  margin-left: 20%;
  margin-top: 10%;
  border: 1px solid #aaa;
  background-color: #eee;
}

JavaScript:

window.onload = function() {

  document.getElementById('btnPop1').onclick = function() {
    // Show pop1 if not showing
    document.getElementById("pop1").style.display = "block";
  };
  document.getElementById('pop1').onclick = hideOnClick;

  document.getElementById('btnPop2').onclick = function() {
    // Create and show pop2
    var pop = document.createElement("div");
    pop.id = "pop2";
    pop.innerHTML =
      "<p>I'm the second pop-up. My content was added to " +
      "the page dynamically. Click me to close.</p>";
    pop.onclick = removeOnClick;
    document.body.appendChild(pop);
  };

  function hideOnClick(e) {
    e = e || window.event;
    this.style.display = "none";
    if (e.stopPropagation) {
      e.stopPropagation();
    }
  }

      function removeOnClick(e) {
    e = e || window.event;
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    this.onclick = "";
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

};

That's not meant to be the be-all, end-all (at all), just to point you in the right direction.

Some references:

• DOM2 Core (well-supported cross-browser) - for the things like createElement, appendChild, parentNode, removeChild I used above
• DOM2 HTML - useful information about HTML elements and how they relate to the DOM
• DOM3 Core - newer DOM spec, less well-supported by browsers but they're coming along