locked
Bootstrap Modal RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1979860870 posted

    Hi

      Instead of below code i want to create BootStrap Modal & how to replace this code with Modal 

    catch (Exception ex)
                {
                    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + CommonFunction.ErrorConnection + "');", true);
                }

    <script type="text/javascript">
            function ShowPopup(message) {
                $(function () {
                    $("#dialog").html(message);
                    $("#dialog").dialog({
                        title: "Message Box",
                        buttons: {
                            Close: function () {
                                $(this).dialog('close');
                            }
                        },
                        modal: true
                    });
                });
            };
        </script>

    Thanks

    Sunday, May 23, 2021 5:52 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1330468790 posted

    Hi jagjit saini,

     

    You can directly refer to the documentation about how to call a modal via Javascript on Bootstrap website:

    https://getbootstrap.com/docs/4.0/components/modal/#via-javascript

      

    More details, you could refer to below codes:

    aspx:

    <head runat="server">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="modalContent">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <asp:Button ID="ShowModalBtn" runat="server" Text="Show Modal" OnClick="ShowModalBtn_Click" />
        <script type="text/javascript">
            function ShowPopup(message) {
                $("#modalContent").html(message);
                $('#exampleModal').modal('toggle');
            };
        </script>
    </form>

</body>

    Code behind:

     protected void ShowModalBtn_Click(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('this is an error');", true);
        }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    Monday, May 24, 2021 9:05 AM