Modal(Dialog Box) in PowerApps Portal

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>