Close Dynamsoft Web Twain Popup

Question

Close Dynamsoft Web Twain Popup

537 views Asked by C J At 21 March 2022 at 12:55

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

Original Q&A

There are 1 answers

**yushulx** · Accepted Answer · 2022-03-22 02:27:46

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>

TechQA.

Close Dynamsoft Web Twain Popup

There are 1 answers

Related Questions in ANGULAR

Related Questions in ANGULAR13

Related Questions in DYNAMIC-WEB-TWAIN

Related Questions in DYNAMSOFT

Popular Questions

Popular Tags

Trending Questions