How to make background inactive when inline popup raised

Question

0.00/5 (No votes)

See more:

I am trying to block the background with my jquery modal dialog until the user closes the window. Any idea on how to achieve this?

By "blocking the background" I mean disabling the other elements on the page (i.e. making other elements unclickable).

Is there any errors on my coding????

What I have tried:

JavaScript

<script type="text/javascript">
        $( function () {
            $("[id*=btnadd]").live("click", function () {        
                $("#modal_dialog").dialog({
                    title: "Manage Branch",
                    autoopen: false,
                    width: 500,                 
                    buttons: {
                        ADD: function () {
                            var textvalue = $("#<%=TextBox2.ClientID%>").val();
                            $('#<%= hndtxt.ClientID %>').val(textvalue);
                            $("[id*=add]").click();
                        },
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            });
        } );
    </script>

<input type="button" id="btnadd" value="Add Branch" name="btnadd" style="float: right" />

 <div id="modal_dialog">
           <div class="tab_container">
                <div id="tab2" class="tab_content">
                    <table cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
              
                                                                          
                                     Branch:
                                        <asp:TextBox ID="TextBox2" runat="server" Style="margin-left: 97px">
                                         <asp:label id="lbl_status" runat="server"  cssclass="red" text="">
                                        
                                     <br>
                                        <br>
                                                  </td>
                            </tr>
                                                                  
                        </tbody>
                   
                    </table>
                         
                </div>
                <!-- end of #tab1 -->
            </div>
            <!-- ID -->     

                     
        </div>

Posted 19-Oct-16 20:43pm

Aashish68

Updated 25-Oct-16 0:51am

Add a Solution

Comments

Suvendu Shekhar Giri 20-Oct-16 3:27am

"Is there any errors on my coding????"

Are you getting any?

2 solutions

Solution 1

Hello ,
You have to use modal option to get required out put .
Try this

<script type="text/javascript">
        $( function () {
            $("[id*=btnadd]").live("click", function () {        
                $("#modal_dialog").dialog({
                    title: "Manage Branch",
                    autoopen: false,
                    modal: true,
                    width: 500,                 
                    buttons: {
                        ADD: function () {
                            var textvalue = $("#<%=TextBox2.ClientID%>").val();
                            $('#<%= hndtxt.ClientID %>').val(textvalue);
                            $("[id*=add]").click();
                        },
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
            });
        } );
    </script>

Thanks

Documentation : Here

Posted 19-Oct-16 21:27pm

Animesh Datta

Comments

Karthik_Mahalingam 20-Oct-16 4:20am

5

Aashish68 20-Oct-16 4:41am

when i give modal:true it works but the ADD button is not firing.without giving modal:true ADD button works well
why it is not firing when i give modal:true?

Animesh Datta 20-Oct-16 6:26am

Thank You !

Aashish68 20-Oct-16 4:35am

when i give modal:true it works but the ADD button is not firing.without giving modal:true ADD button works well
why it is not firing when i give modal:true?

Karthik_Mahalingam 20-Oct-16 5:05am

i have tested your code with modal:true? it works fine.
you might be missing something.

Aashish68 20-Oct-16 5:31am

i have used this Button ID for that ADD button.is there any problem using asp button or i have to use html button?

<asp:Button ID="add" runat="server" Text="button" Style="display: none" OnClick="btninsert_Click">

protected void btninsert_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = @"Data Source=KENITECHPC5-PC;Initial Catalog=TaxiAPP;Integrated Security=True";
SqlCommand command = new SqlCommand("Insert into tbl_Branch(Branch)values(@Branch)", con);
con.Open();
string Branch = hndtxt.Value.ToString();
command.Parameters.AddWithValue("@Branch", Branch);
command.ExecuteNonQuery();
con.Close();
BindGridview();

}

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Aashish68 · Accepted Answer · 2016-10-25T00:51:00

When using modal:true we have to use ajax call for firing the button in jquery modal popup or else we can use another method.