Displaying aspx page with in SweetAlert2 Popup?

Question

I want to display custom aspx page in popup. I'm using Sweetalert2.js and tried to load aspx page with iframe.

Problem is: I have master page and when i try to download page's unrendered code is loading. It causes an error on when loading popup.

Because code is starting with <% .. on top of the aspx page.

How can i open aspx page to be rendered html (aspx) without an error in Sweetalert2 popup.

I hope it's possible that i can use Sweetalert2.js as modal popup. I would like to open aspx page in Sweetalert popup page.

For example: I have a login page named login.aspx

When user clicks on the Login button; I want to show login.aspx page with in Sweetalert2.js popup.

Answer 1

You can display a div with a iframe inside, and have sweetalert then show that other page. Of course, that "other" page should not have a master page, else you see the menu bar inside of of the popup, and also at the top of the existing page.

I would suggest that a jQuery.UI dialog is better suited.

However, say I have this markup:

        <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

        <input id="Button1" type="button" value="button"
            onclick="mypopdiv();return false;"
            />
     

        <script>

            function mypopdiv() {
                Swal.fire({
                    title: 'My div area',
                    width: '1000px',
                    html: `<div>
                        <iframe
                          src="../Grids/Fighters.aspx" style="width:900px;height:750px" >
                        </iframe>
                    </div>`
                })

            }

        </script>

So, you can see how I placed a iframe to the other page.

The result is this:

The challenge will then to have the code inside of that other page close the dialog.

So, you have to create a logon page without a master page. And you require some button in that pop page to be able to close the page, or they can logon, and then you hit ok to close the dialog.