Modal dialog box with web styles

Published on December 15 2017 by Yousfi Benameur

              

Dialog boxes can be implemented as html/javascript codes.Of course the language javascript is the main/unique language working on web domain.
these codes are a mix from vfp (as overlapper) and javascript (as script code in web page).
in vfp a form can be modal (windowtype=1) ,common vfp (windows) dialogs,messagebox also,...the window blockes all process and wait to the user interaction
to free the screen.
in web its the same thing but the styles are various and attractive.the CSS styles can be embed on the window to make it decorated as well(colors,fonts,images,effects,...styles.).the positions also can be customized.
the first dialog with showModalDialog can replace the messagebox with all its buttons and its modal and can be stylised.it can embed any quantity of texts...in contrary of the native vfp messagebox(limited by its creators!).
it can be built from vfp in any application and can return result.


[Post 249]

Click on code to select [then copy] -click outside to deselect


*1*  created on 14 of december 2017
*this demo uses a cool modal dialogbox.can be a messagebox,informations,...can return a value also.
*as its with html it can be decorating as well as any web window object(colors,pictures,apply custom styles... add other buttons..)
*prepare the modal dialogbox contents (as html ) with parameters : xwidth,xheight,xtitle,xtext (as html contents),xpict
*adapted from new2news http://www.news2news.com/vfp/index.php?example=561
*can add any picture background (web or local)in body tag (url).

Local xwidth,xheight,xtitle,xtext,m.xpict
m.xwidth= "520"
m.xheight="560"
m.xtitle="  This is a modal Dialog html based "
TEXT to m.xtext noshow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus<b style="color=indigo;">lorem feugiat</b>
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
<strong>Cras vitae felis venenatis, egestas sem quis, </strong>sodales neque. Donec venenatis hendrerit odio, non
<p class="p1">pellentesque metus scelerisque ac. Suspendisse aliquet rhoncus odio id viverra. Vestibulum feugiat
lectus a nisl pulvinar, in tempor metus eleifend<p>. Nunc id odio quam. Praesent egestas lorem ut
sollicitudin consectetur. Vestibulum id bibendum est. Ut vel lacus sapien. Quisque eget molestie
sem. Integer eget purus eu orci molestie aliquam quis in ante. Integer a magna eget lectus finibus
 <a href="http://www.yousfi.over-blog.com"> my Blog </a> porttitor. Donec fringilla sapien a quam aliquet, pellentesque blandit nisl placerat. Nam hendrerit
velit vel ex aliquam, <strong>eget convallis ante mollis.</strong>
ENDTEXT
m.xpict="http://img.over-blog-kiwi.com/1/43/54/07/20171204/ob_2f9ca2_3.png"  &&web url also

=ybuild(m.xwidth,m.xheight,m.xtitle,m.xtext,m.xpict)

*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*
*dont touch from here!
*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*

Function ybuild()
  Lparameters xwidth,xheight,xtitle,xtext,xpict
  Local m.myvar
  TEXT to m.myvar textmerge pretext 7 noshow
<title>Using HTML Dialogs in Visual FoxPro</title>
<style>
body { background-color: #f5f5d0;
  background: linear-gradient(to bottom, blue, indigo 50%, navy);
  scroll:no;
  }

.DlgMsg {
	font-family: Segoe UI, Arial;
	font-size: 11pt;
	color: #603030;
	padding:10px 15px;
	position: relative;top: 15px;left:10px;
}
.p1 {font-weight:italic;color:tomato;}
.DlgButtons {
    position:relative;top:30px;
}
.DlgBtn {
	font-family: Segoe UI, Arial;
	font-size: 12pt;
	font-weight: 700;
	color: #704040;
	background-color: #d1a5a5;
	border: 1px solid #907060;
	width: 70px;
	height: 27px;
}
h2 {color:orange;background-color:navy}
</style>

<body style=" scroll:no;background:url('');repeat:repeat;background-color:moccasin; " >
<table style="padding:10px;width:100%"> <tr>
<td width="15px"></td>
<td style="background-color:navy;"><a href="http://www.yousfi.over-blog.com"><img src="<<m.xpict>>" alt="My Blog" width="64" height="64" style="border:0;float:left;"></a></td>
<td style="color:white;font-size:22px;background-color:navy;"><center>  <<m.xtitle>>  </center></td>
</tr></table>


 <div class="DlgMsg"><Strong>ShowHTMLDialog</Strong>
<<m.xtext>>
</div>
<center><div class="DlgButtons">
<input class="DlgBtn" id="btnOk" type="Submit" value="OK"> </center>

</div>
<script for="btnOk" event="onclick">
	window.returnValue="Agree";
	window.close();
</script>
</body></html>
  ENDTEXT
 
  Set Safe Off
  Local m.yrep
  m.yrep=Addbs(Justpath(Sys(16,1)))
  Strtofile(m.myvar,m.yrep+"dlgdefinition.html")


  #Define URL_MK_LEGACY 0
  #Define URL_MK_UNIFORM 1
  Do Declare

  Local m.cDlgDefinitionFile, m.cUrl, m.nUrlMoniker, m.cFeatures,;
    m.cArguments, m.cOutput, m.cDlgReturn

  * the dialog definition is stored in local HTML file

  m.cDlgDefinitionFile=Lower(m.yrep+"dlgdefinition.html")

  If Not File(m.cDlgDefinitionFile)
    Messagebox("file"+m.yrep+ "dlgdefinition.html must be created before running this code",16+4096)
    Return .F.
  Endif

  * create URL Moniker from the Url
  m.cUrl=ToUnicode(m.cDlgDefinitionFile)
  m.nUrlMoniker=0
  If CreateURLMonikerEx(0, m.cUrl, @nUrlMoniker, URL_MK_UNIFORM) <> 0
    Messagebox("failed...cancelling !")
    Return  && failed
  Endif

  * ShowHTMLDialog input parameteres
  m.cFeatures=ToUnicode("dialogWidth:"+m.xwidth+"px ;dialogHeight:"+m.xheight+"px;center:1;")
  m.cArguments=ToUnicode("")
  m.cOutput=Replicate(Chr(0), 256)
  m.cDlgReturn=""

  If ShowHTMLDialog(_Screen.HWnd, m.nUrlMoniker,;
      m.cArguments, m.cFeatures, @cOutput) = 0
    nAddr=buf2dword(Substr(cOutput,9,4))
    If m.nAddr <> 0
      cDlgReturn=FromUnicode( Mem2Str(nAddr) )
    Endif
  Endif
  *? cDlgReturn
  * end of main
Endfunc


Procedure Declare
  Declare Integer CreateURLMonikerEx In urlmon;
    INTEGER pMkCtx, String szURL,;
    INTEGER @ppmk, Long dwFlags

  Declare Integer ShowHTMLDialog In mshtml;
    INTEGER hwndParent, Integer pMk, String pvarArgIn,;
    STRING pchOptions, String @pvarArgOut

  Declare RtlMoveMemory In kernel32 As MemToStr;
    STRING @, Integer, Integer

Function buf2dword(cBuffer)
  Return Asc(Substr(cBuffer, 1,1)) + ;
    BitLShift(Asc(Substr(cBuffer, 2,1)),  8) +;
    BitLShift(Asc(Substr(cBuffer, 3,1)), 16) +;
    BitLShift(Asc(Substr(cBuffer, 4,1)), 24)
endfunc

Function ToUnicode(cStr)
  Return Strconv(cStr+Chr(0), 5)
endfunc

Function FromUnicode(cStr)
  Return Strtran(Strconv(cStr, 6), Chr(0), "")
endfunc

Function Mem2Str(nBaseAddr As Number)
  #Define BUFFER_SIZE 16
  #Define EMPTY_BUFFER Replicate(Chr(0), BUFFER_SIZE)
  * reads Unicode string from specified memory address
  If nBaseAddr = 0
    Return ""
  Endif
  Local nCurAddr, cResult, cBuffer, nPos
  nCurAddr=nBaseAddr
  cResult=""

  Do While .T.
    cBuffer = EMPTY_BUFFER
    = MemToStr(@cBuffer, nCurAddr, BUFFER_SIZE)
    nPos = At(Chr(0)+Chr(0), cBuffer)
    If nPos > 0
      cResult = cResult + Substr(cBuffer, 1, nPos)
      Return cResult
    Else
      cResult = cResult + cBuffer
      nCurAddr = m.nCurAddr + BUFFER_SIZE
    Endif
  Enddo
Endfunc

Click on code to select [then copy] -click outside to deselect


*2* created on14 of december 2017
*this use internetexplorer.application in fullscreen mode and topmost to fire a dialog
*apie is transparent (to adjust)  with a cover background web picture.it shows 15 ec and releases.
*it can be a messagebox,a splash screen,or a custom dialog box..

Clea Dlls
Local m.ytext1 ,m.ytext2
TEXT to m.ytext1 pretext 7 noshow
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
Cras vitae felis venenatis, egestas sem quis, sodales neque. Donec venenatis hendrerit odio, non
pellentesque metus scelerisque ac. Suspendisse aliquet rhoncus odio id viverra. Vestibulum feugiat
lectus a nisl pulvinar, in tempor metus eleifend. Nunc id odio quam. Praesent egestas lorem ut
sollicitudin consectetur.
ENDTEXT
TEXT to m.ytext2 pretext 7 noshow
 Vestibulum id bibendum est. Ut vel lacus sapien. Quisque eget molestie
sem. Integer eget purus eu orci molestie aliquam quis in ante. Integer a magna eget lectus finibus
porttitor. Donec fringilla sapien a quam aliquet, pellentesque blandit nisl placerat. Nam hendrerit
velit vel ex aliquam, eget convallis ante mollis.    <br>
votre serviteur: Yousfi Benameur
ENDTEXT

Local m.myvar
TEXT to m.myvar textmerge pretext 7 noshow
<!DOCTYPE html>
<html>
<head>
<style>

.ydiv {
  width: 100%;
  height: 850px;
  border: 0px solid black;
  margin-bottom: 0em;
  background-image: url(http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg);
  background-repeat: no-repeat;
}
#cover { background-size: cover; }

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width:100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
  //  background-color: rgb(0,0,0); /* Fallback color */
  //  background-color: rgba(0,0,0);   //,0.5); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    position: relative;
    background-color:  #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width:50%;
    box-shadow: 0 4px 8px 0 rgba(20,20,20,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
/* The Close Button */
.close {
    visibility="hidden";    //not display
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-header {
    padding: 2px 16px;
    background-color: navy ;   //lime; //#5cb85c;
    color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
    padding: 2px 16px;
    background-color: navy;   //#5cb85c;
    color: white;
}

a {color:#FF0000;text-decoration: none;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link *
}
</style>
</head>

<body  background=black oncontextmenu="return false;" scroll="no">
<!-- image from unsplash.com -->
<div class="ydiv" id="cover"></div>
<button id="myBtn" style="visibilty='visible';"></button>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
	  <img src="http://img.over-blog-kiwi.com/1/43/54/07/20171204/ob_2f9ca2_3.png" width="64",height="64" style="float:left;">
      <center><h2>Modal Header</h2></center>
    </div>
    <div class="modal-body">
      <p style="color:maroon;font-size:16px;font-family:tahoma;">Some text in the Modal Body
	<<m.ytext1>>
	  </p>
      <p style="color:purple;font-size:24px;font-family:script;">
	 <<m.ytext2>>
	  </p>
    </div>
    <div class="modal-footer">
      <h3>Visit my Blog  at yousfi.over-blog.com</h3>
    </div>
  </div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "yes";   //"none"; //dont close
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "yes";   //"none"; //dont close
    }
}
</script>

</body>
</html>
ENDTEXT

Do ydeclare

_Screen.WindowState=1
Local apie
apie=Newobject("internetexplorer.application")
With apie
  .Navigate("about:blank")
  Inke(1)
  .Document.Open()
  .Document.Write(m.myvar)
  .Document.Close()
  bringWindowToTop(.HWnd)
  .fullscreen=1

  #define HWND_TOPMOST -1
  #define  SWP_NOMOVE 0x0002
  #define SWP_NOSIZE 0x0001
  SetWindowPos(.hwnd, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE +SWP_NOSIZE)  &&make ie window topmost of all present windows
  Inke(0.1)
  =yhideonTaskbar(.HWnd)   &&hide the IE icon on taskbar

  #Define LWA_COLORKEY 1
  #Define LWA_ALPHA 2
  #Define GWL_EXSTYLE -20
  #Define WS_EX_LAYERED 0x80000
  Local nExStyle, nRgb, nAlpha, nFlags
  nExStyle = GetWindowLong(.HWnd, GWL_EXSTYLE)
  nExStyle = Bitor(nExStyle, WS_EX_LAYERED)
  = SetWindowLong(.HWnd, GWL_EXSTYLE, nExStyle)
  nRgb = Rgb(0,0,0)   &&the color to make transparent
  nAlpha =210
  nFlags = LWA_ALPHA   &&+LWA_COLORKEY
  = SetLayeredWindowAttributes(.HWnd, m.nRgb,m.nAlpha, m.nFlags)
  .Visible=.T.

  .Document.getelementById("myBtn").Click(.T.)
  sleep(15000)  &&show dialog 15 sec and quit.
  Try
    .Quit
  Catch
  Endtry
Endwith
Clea Dlls
Retu

Procedure ydeclare
  Declare Integer Sleep In kernel32 Integer
  Declare Integer BringWindowToTop In user32 Integer HWnd
  Declare Integer GetWindowLong In user32    Integer HWnd, Integer nIndex
  Declare Integer SetWindowLong In user32   Integer HWnd, Integer nIndex, Integer dwNewLong
  Declare Integer SetLayeredWindowAttributes In user32    Integer HWnd, Integer crKey, SHORT bAlpha, Integer dwFlags
  Declare Long FindWindow In "user32" String lpClassName, String lpWindowName
  Declare Integer ShowWindow In user32  Integer HWnd, Integer nCmdShow
  DECLARE INTEGER SetWindowPos IN user32;
    INTEGER hwnd,;
    INTEGER hWndInsertAfter,;
    INTEGER x,;
    INTEGER y,;
    INTEGER cx,;
    INTEGER cy,;
    INTEGER wFlags
Endproc

Function yhideonTaskbar  &&hide ie icon on taskbar
  Lparameters HWnd
  #Define GWL_STYLE -16
  #Define WS_CAPTION 0x00C00000
  #Define WS_THICKFRAME 0x00040000
  #Define WS_DLGFRAME 0x00400000
  *this extened style dont show any icon window (hwnd) on the taskbar
  #Define SW_HIDE 0
  #Define SW_SHOW 5
  #Define WS_EX_NOACTIVATE 0x08000000 &&L
  #Define GWL_EXSTYLE -20
  ShowWindow(HWnd, SW_HIDE) &&important hide/set/hide window
  SetWindowLong(HWnd, GWL_EXSTYLE , WS_EX_NOACTIVATE)
  ShowWindow(HWnd, SW_SHOW)
Endfunc

Click on code to select [then copy] -click outside to deselect


*3* created on thursday 14 of december 2017
*a black screen with a message in a dialogbox
*apie is used with transparency.in previous posts i presented many same screens.
*apie must be on topmost (see the APIs used to do that)

Clea Dlls
Local m.ytext1 ,m.ytext2
TEXT to m.ytext1 pretext 7 noshow
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
Cras vitae felis venenatis, egestas sem quis, sodales neque. Donec venenatis hendrerit odio, non
pellentesque metus scelerisque ac. Suspendisse aliquet rhoncus odio id viverra. Vestibulum feugiat
lectus a nisl pulvinar, in tempor metus eleifend. Nunc id odio quam. Praesent egestas lorem ut
sollicitudin consectetur.
ENDTEXT
TEXT to m.ytext2 pretext 7 noshow
 Vestibulum id bibendum est. Ut vel lacus sapien. Quisque eget molestie
sem. Integer eget purus eu orci molestie aliquam quis in ante. Integer a magna eget lectus finibus
porttitor. Donec fringilla sapien a quam aliquet, pellentesque blandit nisl placerat. Nam hendrerit
velit vel ex aliquam, eget convallis ante mollis.    <br>
votre serviteur: Yousfi Benameur
ENDTEXT

Local m.myvar
TEXT to m.myvar textmerge pretext 7 noshow
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width:100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0);   //,0.5); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    position: relative;
    background-color:  #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width:50%;
    box-shadow: 0 4px 8px 0 rgba(20,20,20,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
/* The Close Button */
.close {
    visibility="hidden";    //not display
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: navy ;   //lime; //#5cb85c;
    color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
    padding: 2px 16px;
    background-color: navy;   //#5cb85c;
    color: white;
}
a {color:#FF0000;text-decoration: none;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link *
}
</style>
</head>
<body  background=black oncontextmenu="return false;">
<!-- Trigger/Open The Modal -->
<button id="myBtn" style="visibilty='hidden';"></button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
	  <img src="http://img.over-blog-kiwi.com/1/43/54/07/20171204/ob_2f9ca2_3.png" width="64",height="64" style="float:left;">
      <center><h2>Modal Header</h2></center>
    </div>
    <div class="modal-body">
      <p style="color:maroon;font-size:16px;font-family:tahoma;">Some text in the Modal Body
	<<m.ytext1>>
	  </p>
      <p style="color:purple;font-size:24px;font-family:script;">
	 <<m.ytext2>>
	  </p>
    </div>
    <div class="modal-footer">
      <h3>Visit my Blog  at yousfi.over-blog.com</h3>
    </div>
  </div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "yes";   //"none"; //dont close
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "yes";   //"none"; //dont close
    }
}
</script>
</body>
</html>
ENDTEXT

Do ydeclare

_Screen.WindowState=1
Local apie
apie=Newobject("internetexplorer.application")
With apie
  .Navigate("about:blank")
  Inke(1)
  .Document.Open()
  .Document.Write(m.myvar)
  .Document.Close()
  bringWindowToTop(.HWnd)
  .fullscreen=1

  #define HWND_TOPMOST -1
  #define  SWP_NOMOVE 0x0002
  #define SWP_NOSIZE 0x0001
  SetWindowPos(.hwnd, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE +SWP_NOSIZE)  &&make ie window topmost of all present windows
  Inke(0.1)
  =yhideonTaskbar(.HWnd)   &&hide the IE icon on taskbar

  #Define LWA_COLORKEY 1
  #Define LWA_ALPHA 2
  #Define GWL_EXSTYLE -20
  #Define WS_EX_LAYERED 0x80000
  Local nExStyle, nRgb, nAlpha, nFlags
  nExStyle = GetWindowLong(.HWnd, GWL_EXSTYLE)
  nExStyle = Bitor(nExStyle, WS_EX_LAYERED)
  = SetWindowLong(.HWnd, GWL_EXSTYLE, nExStyle)
  nRgb = Rgb(0,0,0)   &&the color to make transparent
  nAlpha =230
  nFlags = LWA_ALPHA   &&+LWA_COLORKEY
  = SetLayeredWindowAttributes(.HWnd, m.nRgb,m.nAlpha, m.nFlags)
  .Visible=.T.

  .Document.getelementById("myBtn").Click(.T.)
  sleep(10000)  &&show dialog 10 sec and quit.
  Try
    .Quit
  Catch
  Endtry
Endwith
Clea Dlls
Retu

Procedure ydeclare
  Declare Integer Sleep In kernel32 Integer
  Declare Integer BringWindowToTop In user32 Integer HWnd
  Declare Integer GetWindowLong In user32    Integer HWnd, Integer nIndex
  Declare Integer SetWindowLong In user32   Integer HWnd, Integer nIndex, Integer dwNewLong
  Declare Integer SetLayeredWindowAttributes In user32    Integer HWnd, Integer crKey, SHORT bAlpha, Integer dwFlags
  Declare Long FindWindow In "user32" String lpClassName, String lpWindowName
  Declare Integer ShowWindow In user32  Integer HWnd, Integer nCmdShow
  DECLARE INTEGER SetWindowPos IN user32;
    INTEGER hwnd,;
    INTEGER hWndInsertAfter,;
    INTEGER x,;
    INTEGER y,;
    INTEGER cx,;
    INTEGER cy,;
    INTEGER wFlags
Endproc

Function yhideonTaskbar  &&hide ie icon on taskbar
  Lparameters HWnd
  #Define GWL_STYLE -16
  #Define WS_CAPTION 0x00C00000
  #Define WS_THICKFRAME 0x00040000
  #Define WS_DLGFRAME 0x00400000
  *this extened style dont show any icon window (hwnd) on the taskbar
  #Define SW_HIDE 0
  #Define SW_SHOW 5
  #Define WS_EX_NOACTIVATE 0x08000000 &&L
  #Define GWL_EXSTYLE -20
  ShowWindow(HWnd, SW_HIDE) &&important hide/set/hide window
  SetWindowLong(HWnd, GWL_EXSTYLE , WS_EX_NOACTIVATE)
  ShowWindow(HWnd, SW_SHOW)
Endfunc

Click on code to select [then copy] -click outside to deselect


*4* created on 13 of december 2017
*HTA window is a special IE one without security barriers( see my previous posts on this object).
*An HTA  dialog as modal idem messagebox(ok).pass parameters to function title,text,icon (here not shown along titlebar hidden),image (web or local),width,height
*can add another buttons as messagebox can does.
*the dialog box is height auto adjustable automatically with the second script.adjust the width is suffisent.its without titlebar here (see the head code).
*

Local m.ytitle,m.ytext,m.yicon,m.yimage,m.ywidth
m.ywidth=900
m.yheight=0   && any height the window resizes correctly  at the end
m.ytitle="this is my main title of hta dialog application"

TEXT to m.ytext noshow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.*
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
Cras vitae felis venenatis, egestas sem quis, sodales neque. Donec venenatis hendrerit odio, non
pellentesque metus scelerisque ac. Suspendisse aliquet rhoncus odio id viverra. Vestibulum feugiat
lectus a nisl pulvinar, in tempor metus eleifend. Nunc id odio quam. Praesent egestas lorem ut
sollicitudin consectetur. Vestibulum id bibendum est. Ut vel lacus sapien. Quisque eget molestie
sem. Integer eget purus eu orci molestie aliquam quis in ante. Integer a magna eget lectus finibus
porttitor. Donec fringilla sapien a quam aliquet, pellentesque blandit nisl placerat. Nam hendrerit
velit vel ex aliquam, eget convallis ante mollis.
ENDTEXT

TEXT to m.ytext1 noshow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.*
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci.
ENDTEXT

m.ytext=Strtran(m.ytext,Chr(13),"<br>")
m.ytext1=Strtran(m.ytext,Chr(13),"<br>")
m.yicon="C:\Program Files (x86)\Microsoft Visual FoxPro 9\GRAPHICS\ICONS\ELEMENTS\SUN.ICO"
m.yimage="http://img.over-blog-kiwi.com/1/43/54/07/20171204/ob_2f9ca2_3.png"
=ydialog(m.ytitle,m.ytext,m.yicon,m.yimage,m.ywidth,m.yheight)

Function ydialog()
  Lparameters ytitle,ytext,yicon,yimage,ywidth,yheight
  Local m.myvar
  TEXT to m.myvar textmerge pretext 7 noshow
<!DOCTYPE html>
<meta http-equiv='x-ua-compatible' content='ie=IE11'/>
<head><title>This is my HTA window Title</Title>
<HTA:Application
	 Application="My App"
	 Singleinstance="yes"
	 ShowInTaskbar="no"
	 sysmenu="yes"
	 border="dialog"
	 borderStyle="complex"
	 scroll="no"
	 Selection="no"
	 Contextmenu="no"
	 WINDOWSTATE="normal "
     MaximizeButton="no"
     MinimizeButton="no"
	 Caption="no"
	 navigable="yes"
	 icon="<<m.yicon>>">
</Head>
<body bgcolor=rgba(45,45,45,.9) >
<div id="ydiv">
<Table>
<tr>
<td width="100%" style="background-color:navy;color:white;font-weight:bold;font-size:20px;">
<a href="http://www.yousfi.over-blog.com" target="_blank" ><img src="<<yimage>>" border="0" alt="my blog"  width="64" height="64"   style="cursor:hand;float:left;"></a>
<center><h2  > <<m.ytitle>> </h2></center></td>
<td></td>
</tr>
</table>
<center>
<p style ="padding:20px;width:95%;float:left;color:#800040;background-color:bisque;font-weight:bold;font-family:arial;font-size:16px;">
<<m.ytext>>
</p>
<p style ="padding:20px;width:95%;float:left;color:red;background-color:bisque;font-weight:bold;font-family:script;font-size:20px;">
<<m.ytext1>>
</p>
  
<br>
<input type="button"  style="background-color: #4CAF50;color: red;text-align: center;padding:1px ; font-size: 16px;cursor:pointer;"  value="   Ok   " onclick="window.open('','_self');window.close();">
</center>
<br>
</div>

<script type="text/javascript">
var h=document.getElementById("ydiv").offsetHeight;
	window.resizeTo(<<ywidth>>,h+35);
window.moveTo((screen.width - <<ywidth>>) / 2, (screen.height - h) / 2);
</script>
</body>
</html>
  ENDTEXT
  Set Safe Off
  Local m.lcdest
  m.lcdest=Addbs(Sys(2023))+"ytemp.hta"
  Strtofile(m.myvar,m.lcdest)

  &&shellexecute
  Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
    STRING cOperation,;
    STRING cFileName,;
    STRING cParameters,;
    STRING cDirectory,;
    INTEGER nShowWindow
  result = ShellExecute(0, "open", m.lcdest,"","",1)
Endfunc

Click on code to select [then copy] -click outside to deselect


*5* created on 14 of december 207
*this is the same app as above but with a blurred cover background.can applied transparency or no

Clea Dlls
Local m.ytext1 ,m.ytext2
TEXT to m.ytext1 pretext 7 noshow
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
Cras vitae felis venenatis, egestas sem quis, sodales neque. Donec venenatis hendrerit odio, non
pellentesque metus scelerisque ac. Suspendisse aliquet rhoncus odio id viverra. Vestibulum feugiat
lectus a nisl pulvinar, in tempor metus eleifend. Nunc id odio quam. Praesent egestas lorem ut
sollicitudin consectetur.
ENDTEXT
TEXT to m.ytext2 pretext 7 noshow
 Vestibulum id bibendum est. Ut vel lacus sapien. Quisque eget molestie
sem. Integer eget purus eu orci molestie aliquam quis in ante. Integer a magna eget lectus finibus
porttitor. Donec fringilla sapien a quam aliquet, pellentesque blandit nisl placerat. Nam hendrerit
velit vel ex aliquam, eget convallis ante mollis.    <br>
votre serviteur: Yousfi Benameur
ENDTEXT

Local m.xwidth,m.xheight,m.xblur,m.xtitle,m.xpict
m.xwidth=Sysmetric(1)-10
m.xheight=Sysmetric(2)
m.xblur=2   &&5
m.xtitle="A modal dialog on fullscreen Api with blurring background"
*m.xpict="https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg="
m.xpict="http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg"

Local m.ok
m.ok=Inputbox("Apply transparency (0)-no transparency(1)","","0")
If !Inlist(m.ok,"0","1")
  m.ok="0"
Endi

Local m.myvar
TEXT to m.myvar textmerge pretext 7 noshow
<!DOCTYPE html>
<html>
<head>
<style>

/* Blur-filter specific code */
/* top notch browsers */
.blur {
  -webkit-filter: blur(<<m.xblur>>px);
  filter: blur(<<m.xblur>>px);
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  transform: scale(1.4); }

/* IE */
.blur-ie {
  display: none;
  transform: scale(1.4); }

html[data-agent*="Trident"] .blur-wrapper .blur {
  display: none; }

html[data-agent*="Trident"] .blur-wrapper .blur-ie {
  display: block; }

/* app specific code */
.profile {
  height: <<m.xheight>>px;
  width:  <<m.xwidth>>px;
  position: relative;
  border-radius: 8px;
  overflow: hidden; }
  .profile .cover {
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .profile .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: rgba(10, 10, 10, 0.2);
    padding: 10px 0; }

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width:100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
  //  background-color: rgb(0,0,0); /* Fallback color */
  //  background-color: rgba(0,0,0);   //,0.5); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color:  #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width:50%;
    box-shadow: 0 4px 8px 0 rgba(20,20,20,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    visibility="hidden";    //not display
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-header {
    padding: 2px 16px;
    background-color: navy ;   //lime; //#5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: navy;   //#5cb85c;
    color: white;
}

a {color:#FF0000;text-decoration: none;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link *
}

</style>
</head>
<body  background=black oncontextmenu="return false;" scroll="no">
<div class="profile blur-wrapper">
        <div class="cover blur" style="background-image: url('<<m.xpict>>')"></div>
        <svg class="blur-ie">
            <defs>
                <filter id="blur">
                    <feGaussianBlur stdDeviation="4" />
                </filter>
            </defs>
            <image xlink:href="<<m.xpict>>" width="100%" height="100%"  filter="url(#blur)"></image>
        </svg>

        <span class="title"><<m.xtitle>></span>

<button id="myBtn" style="visibilty='hidden';"></button>


<!-- Trigger/Open The Modal -->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
	  <img src="http://img.over-blog-kiwi.com/1/43/54/07/20171204/ob_2f9ca2_3.png" width="64",height="64" style="float:left;">
      <center><h2>Modal Header</h2></center>
    </div>
    <div class="modal-body">
      <p style="color:maroon;font-size:16px;font-family:tahoma;">Some text in the Modal Body
	<<m.ytext1>>
	  </p>
      <p style="color:purple;font-size:24px;font-family:script;">
	 <<m.ytext2>>
	  </p>
    </div>
    <div class="modal-footer">
      <h3>Visit my Blog  at yousfi.over-blog.com</h3>
    </div>
  </div>
</div>
<script>try {document.documentElement.setAttribute("data-agent", navigator.userAgent);
} catch (error) { throw error; }

//# sourceURL=guyoyodapa.js
</script>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "yes";   //"none"; //dont close

}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "yes";   //"none"; //dont close
    }
}
</script>

</body>
</html>
ENDTEXT

Do ydeclare

_Screen.WindowState=1
Local apie
apie=Newobject("internetexplorer.application")
With apie
  .Navigate("about:blank")
  Inke(1)
  .Document.Open()
  .Document.Write(m.myvar)
  .Document.Close()
  bringWindowToTop(.HWnd)
  .fullscreen=1

  #Define HWND_TOPMOST -1
  #Define  SWP_NOMOVE 0x0002
  #Define SWP_NOSIZE 0x0001
  SetWindowPos(.HWnd, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE +SWP_NOSIZE)  &&make ie window topmost of all present windows
  Inke(0.1)
  =yhideonTaskbar(.HWnd)   &&hide the IE icon on taskbar
  *if transparency

  If m.ok="0"
    #Define LWA_COLORKEY 1
    #Define LWA_ALPHA 2
    #Define GWL_EXSTYLE -20
    #Define WS_EX_LAYERED 0x80000
    Local nExStyle, nRgb, nAlpha, nFlags
    nExStyle = GetWindowLong(.HWnd, GWL_EXSTYLE)
    nExStyle = Bitor(nExStyle, WS_EX_LAYERED)
    = SetWindowLong(.HWnd, GWL_EXSTYLE, nExStyle)
    nRgb = Rgb(0,0,0)   &&the color to make transparent
    nAlpha =200   &&255
    nFlags = LWA_ALPHA   &&+LWA_COLORKEY
    = SetLayeredWindowAttributes(.HWnd, m.nRgb,m.nAlpha, m.nFlags)
  Endi

  .Visible=.T.

  .Document.getelementById("myBtn").Click(.T.)
  sleep(10000)  &&show dialog 10 sec and quit.
  Try
    .Quit
  Catch
  Endtry
Endwith
Clea Dlls
Retu

Procedure ydeclare
  Declare Integer Sleep In kernel32 Integer
  Declare Integer BringWindowToTop In user32 Integer HWnd
  Declare Integer GetWindowLong In user32    Integer HWnd, Integer nIndex
  Declare Integer SetWindowLong In user32   Integer HWnd, Integer nIndex, Integer dwNewLong
  Declare Integer SetLayeredWindowAttributes In user32    Integer HWnd, Integer crKey, SHORT bAlpha, Integer dwFlags
  Declare Long FindWindow In "user32" String lpClassName, String lpWindowName
  Declare Integer ShowWindow In user32  Integer HWnd, Integer nCmdShow
  Declare Integer SetWindowPos In user32;
    INTEGER HWnd,;
    INTEGER hWndInsertAfter,;
    INTEGER x,;
    INTEGER Y,;
    INTEGER cx,;
    INTEGER cy,;
    INTEGER wFlags
Endproc

Function yhideonTaskbar  &&hide ie icon on taskbar
  Lparameters HWnd
  #Define GWL_STYLE -16
  #Define WS_CAPTION 0x00C00000
  #Define WS_THICKFRAME 0x00040000
  #Define WS_DLGFRAME 0x00400000
  *this extened style dont show any icon window (hwnd) on the taskbar
  #Define SW_HIDE 0
  #Define SW_SHOW 5
  #Define WS_EX_NOACTIVATE 0x08000000 &&L
  #Define GWL_EXSTYLE -20
  ShowWindow(HWnd, SW_HIDE) &&important hide/set/hide window
  SetWindowLong(HWnd, GWL_EXSTYLE , WS_EX_NOACTIVATE)
  ShowWindow(HWnd, SW_SHOW)
Endfunc