Window open as modal popup

Question

I want open window open as modal popup     var features    resizable  yes  status  no  scroll  no  help  no  center  yes   width 460 height 140 menubar no directories no location no modal yes       window open href   name   features  false     I can use Window ShowModelDialog    but in my child window I am calling parent javascript method  That is not happening with ShowModelDialog      function CallParentScript weburl           alert weburl          if  weburl    null               var url   weburl               window opener SelectUserImageCallback url               window close                return false                  If I use window open    I can call Parent javascript  But window is not modal   How to solve this  Can I write something in child popup to always top

User · Answer

I agree with both previous answers   Basically  you want to use what is known as a  lightbox  - http   en wikipedia org wiki Lightbox  JavaScript   It is essentially a div than is created within the DOM of your current window tab  In addition to the div that contains your dialog  a transparent overlay blocks the user from engaging all underlying elements   This can effectively create a modal dialog  i e  user MUST make some kind of decision before moving on

User · Answer

A pop-up is a child of the parent window  but it is not a child of the parent DOCUMENT  It is its own independent browser window and is not contained by the parent   Use an absolutely-positioned DIV and a translucent overlay instead   EDIT - example  You need jQuery for this    lt style gt  html  body       height 100       overlay        position absolute      z-index 10      width 100       height 100       top 0      left 0      background-color  f00      filter alpha opacity 10       -moz-opacity 0 1      opacity 0 1      cursor pointer        dialog       position absolute      border 2px solid  3366CC      width 250px      height 120px      background-color  ffffff      z-index 12      lt  style gt   lt script type  text javascript  gt    document  ready function     init       function init             overlay   click function     closeDialog          function openDialog element          this is the general dialog handler        pass the element name and this will copy       the contents of the element to the dialog box          overlay   css  height     document body  height      px           overlay   show           dialog   html   element  html        centerMe   dialog           dialog   show       function closeDialog             overlay   hide            dialog   hide   html         function centerMe element          pass element name to be centered on screen     var pWidth     window  width        var pTop     window  scrollTop       var eWidth     element  width       var height     element  height         element  css  top    130px           element  css  top  pTop 100  px         element  css  left   parseInt  pWidth   2  -  eWidth   2      px        lt  script gt     lt a href  javascript    close me  onclick  openDialog     content     gt show dialog A lt  a gt    lt a href  javascript    close me  onclick  openDialog     contentB     gt show dialog B lt  a gt    lt div id  dialog  class  dialog  style  display none  gt  lt  div gt   lt div id  overlay  style  display none  gt  lt  div gt   lt div id  content  style  display none  gt      Lorem ipsum dolor sit amet  consectetur adipiscing elit  Proin nisl felis  placerat in sollicitudin quis  hendrerit vitae diam  Nunc ornare iaculis urna    lt  div gt    lt div id  contentB  style  display none  gt      Moooo mooo moo moo moo      lt  div gt

User · Answer

You can try open a modal dialog with html5 and css3  try this code    x000D   x000D   windowModal   x000D      position  fixed  x000D      font-family  Arial  Helvetica  sans-serif  x000D      top  0  x000D      right  0  x000D      bottom  0  x000D      left  0  x000D      background  rgba 0 0 0 0 8   x000D      z-index  99999  x000D      opacity 0  x000D      -webkit-transition  opacity 400ms ease-in  x000D      -moz-transition  opacity 400ms ease-in  x000D      transition  opacity 400ms ease-in  x000D      pointer-events  none  x000D    x000D   windowModal target   x000D      opacity 1  x000D      pointer-events  auto  x000D    x000D   x000D   windowModal  gt  div   x000D      width  400px  x000D      position  relative  x000D      margin  10  auto  x000D      padding  5px 20px 13px 20px  x000D      border-radius  10px  x000D      background   fff  x000D      background  -moz-linear-gradient  fff   999   x000D      background  -webkit-linear-gradient  fff   999   x000D      background  -o-linear-gradient  fff   999   x000D    x000D   close   x000D      background   606061  x000D      color   FFFFFF  x000D      line-height  25px  x000D      position  absolute  x000D      right  -12px  x000D      text-align  center  x000D      top  -10px  x000D      width  24px  x000D      text-decoration  none  x000D      font-weight  bold  x000D      -webkit-border-radius  12px  x000D      -moz-border-radius  12px  x000D      border-radius  12px  x000D      -moz-box-shadow  1px 1px 3px  000  x000D      -webkit-box-shadow  1px 1px 3px  000  x000D      box-shadow  1px 1px 3px  000  x000D    x000D   x000D   close hover   background   00d9ff    x000D   lt a href   divModal  gt Open Modal Window lt  a gt  x000D   x000D   lt div id  divModal  class  windowModal  gt  x000D       lt div gt  x000D           lt a href   close  title  Close  class  close  gt X lt  a gt  x000D           lt h2 gt Modal Dialog lt  h2 gt  x000D           lt p gt This example shows a modal window without using javascript only using html5 and css3  I try it it   lt  p gt  x000D           lt p gt Using javascript  with new versions of html5 and css3 is not necessary can do whatever we want without using js libraries  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

That solution will open up a new browser window without the normal features such as address bar and similar   To implement a modal popup  I suggest you to take a look at jQuery and SimpleModal  which is really slick    Here are some simple demos using SimpleModal  http   www ericmmartin com projects simplemodal-demos

[javascript] Window.open as modal popup?

Examples related to javascript

Examples related to asp.net

Examples related to css