[SOLVED] Close Dynamsoft Web Twain Popup

Close Dynamsoft Web Twain Popup

I am trying to implement Dynamsoft Web Twain in my Angular project. But there is no close button in the installation popup. How to add close button in the popup?

My Angular version is 13.3 Dynamsoft Webtwain version: 17.2.4 Screenshot of popup

Solution

There are three ways to add the close button in dynamsoft.webtwain.install.js:

Change the value of closeButton to true in _this.DWT.ShowMessage(ObjString.join(''), { width: promptDlgWidth, headerStyle: 1, closeButton: true });. By default, it is false.

Add a button element based on current code.

For example, add

ObjString.push('<div><a id="dwt-btn-close" 
onclick="Dynamsoft.onClose()"><div class="dynamsoft-dwt-dlg- 
button">Close</div></a></div>');

below

ObjString.push(' onclick="Dynamsoft.DCP_DWT_onclickInstallButton()"> 
<div class="dynamsoft-dwt-dlg-button">Download</div></a></div>');

Then add the button click function

Dynamsoft.onClose = function() {
  document.getElementsByClassName('dynamsoft-dialog') 
[0].style.display = 'none';
}

above

Dynamsoft.DCP_DWT_onclickInstallButton = function ()

Now the popup window looks as follows:

You can click the close button to close the dialog. Due to z-index, the HTML elements under the popup dialog are not selectable. A tricky way is to modify z-index after hiding the popup dialog:

let divs = document.getElementsByTagName('div');
  for (let i = 0; i < divs.length; i++) {
    divs[i].style.zIndex = -1;
  }

Do not call _this.DWT.ShowMessage(ObjString.join(''), { width: promptDlgWidth, headerStyle: 1, closeButton: true });. Instead, use jQuery to create a custom dialog. For example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"> 
</script>
<script>
$( function() {
  $( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying 
information. The dialog window can be moved, resized and closed with 
the &apos;x&apos; icon.</p>
</div>
</body>
</html>