All geek questions in one place

How to open modal code from code?

I am trying to open a modal click on a button. Modal can be opened by pressing the button

 <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1" Text="View Details" />

I need to open this modal at the end of the function, but I don’t know how to do it, from C # code. I tried:

 protected void Button2_Click(object sender, EventArgs e)
 {
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$('#View1').modal('show');</script>", false);
 }

Design

 <!-- modal 1 -->
<div class="modal fade" id="View1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" runat="server">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="alert alert-success">

                <strong>Well done!</strong> Successfully Saved     
            </div>
        </div>
        <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
</div>
<!-- modal -->

enter image description here

+4
source share
3 answers

First of all, make sure the ScriptManager is placed in the form tag of the aspx page. secondly, make sure the code works on the client side.

Refer to my code below: aspx code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:ScriptManager runat="server"></asp:ScriptManager>
    </form>
</body>

serveride code:

protected void Button1_Click(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(@"<script language='javascript'>");
    sb.Append(@"$('#myModal').modal('show');");
    sb.Append(@"</script>");

    ClientScript.RegisterStartupScript(this.GetType(), "JSScript", sb.ToString());
}
+2
source

, script , HTML, , . , View Source . script , HTML , , script , , HTML, "show" , . , jQuery , (), - , ().

, , script, "" , . , jQuery "document.ready" ( ):

ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$(function() { $('#View1').modal('show'); });</script>", false);

, ScriptManager ( <form>):

<asp:ScriptManager runat="server"></asp:ScriptManager>
+1

Two problems are possible:

  • You are trying to load the model before the page loads.
  • Your modality id is different

Change view1 on div1

Please try this code.

ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "
<script>$(document).ready(function(){$('#Div1').modal('sho‌​w');});</script>", false);
+1
source

Source: https://habr.com/ru/post/1677980/

More articles:


All Articles