In this blog, we’ll cover the steps to add modal window(popup) in PowerApps Portal.
The Modal is a dialog box/popup window that is displayed on top of the current page.
Use Case: Whenever a user clicks on a button, a dialog box should open up.
Implementation:
Code:
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-lg">Fill Details</button>
<!-- Modal -->
<div id="myModal" role="dialog" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"><button type="button" data-dismiss="modal" class="close">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="fullmame">Full Name</label>
<input type="text" id="fullname" class="form-control">
</div>
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" id="emailaddress" placeholder="name@example.com" class="form-control">
</div>
<div class="form-group">
<label for="comment">Comments</label>
<textarea rows="5" id="comment" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="inputfile">Upload File</label>
<input type="file" id="uploadfile">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" onclick="submitData()" class="btn btn-primary">Submit</button>
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button></div>
</div>
</div>
</div>
- You can call the JavaScript function on the submit button of the modal to perform actions based on your requirements.
Follow the steps given below to add the code on a webpage:
- Go to Apps and select your portal.
- Click on More commands(…) –> Edit

- Select the webpage

- Click on Source Code Editor </>

- Paste your code here and click on save

- Once you are done, Click on Browse website.

You can see the result on the webpage


Reference link to understand Modal in bootstrap: https://getbootstrap.com/docs/4.0/components/modal/