2.3.7. Create a Pop-up Screen¶
This section describes how to create a pop-up screen based on an example application.
The pop-up screen is not created in a separate window as described Creating a button/link to open a separate window/tab (pop-up), but in a dialog format.
- Description of the function to be created
- Click the Change(変更) button on the Project Details screen.
- Click the search button in the client field.
- The client search screen is displayed in a dialog. Click the search(検索) button.
- Click the client ID link in the search results.
- The client search screen is closed, and the selected values are set to the client ID and client name on the project change screen.
2.3.7.1. Display a pop-up (dialog) screen¶
The pop-up (dialog) display is realized using OSS (Bootstrap). For more information, see Bootstrap documentation (external site) .
- Create a business action method
Search for a client and pass the results of the selection to the parent screen.
This function realizes the search process by calling Ajax from a dialog. For information on how to implement action classes, see RESTful Web Service.
- Create a JSP for the pop-up screen
Use jQuery to build a DOM based on the result of the Ajax call and display the result. Since jQuery is used, the detailed explanation is omitted.
For more information, see Documentation (external site) .
- Create a JavaScript function to pass a value from the pop-up screen to the parent window
- Use jQuery to set the information in the dialog to the client name and client ID part. Since jQuery is used, the detailed explanation is omitted.
For more information, see Documentation (external site) .
This completes the explanation of the pop-up screen.