Modal dialogs freezing the screen

HTML & CSS
1

I have following HTML page where I am using the Bootstrap modal dialogs:

For some reason whenever I click on “Add New User” button and “Edit New User” button, the whole screen freezes and I have to refresh the browser to go back to the screen. Could anyone tell me what could be the reason? I remember it worked once but not sure what’s breaking it right now.



<div id="users_page">


    <br /><br />

    <div class="container">

        <h3>Control Panel Users</h3><br /><br />



        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#add_new_user_modal">Add New User</button><br /><br /><br />



        <!-- Modal For Add New User-->

        <div class="modal " id="add_new_user_modal" 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">Add New User</h4>

                    </div>

                    <div class="modal-body">

                        <div class="form-group">

                            <label for="adduname">Username:</label>

                            <input type="adduname" class="form-control" id="adduname" placeholder="Enter New Username">

                        </div>

                        <div class="form-group">

                            <label for="addfname">First Name:</label>

                            <input type="addfname" class="form-control" id="addfname" placeholder="Enter First Name">

                        </div>

                        <div class="form-group">

                            <label for="addlname">Last Name:</label>

                            <input type="addlname" class="form-control" id="addlname" placeholder="Enter Last Name">

                        </div>

                        <div class="dropdown">

                            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                                User Role

                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu">

                                <li><a href="#">User</a></li>

                                <li><a href="#">Admin</a></li>

                                <li><a href="#">Manager</a></li>

                            </ul>

                        </div>



                        <div class="dropdown">

                            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                                Enabled / Disable

                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu">

                                <li><a href="#">Enabled</a></li>

                                <li><a href="#">Disable</a></li>

                            </ul>

                        </div>

                    </div> <!--End Of  div for moda-body class  -->



                    <div class="modal-footer">

                        <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>

                    </div>

                </div><!--End Of  div for moda-content class  -->



            </div><!--End Of  div for modal-dialog class  -->

        </div><!--End Of  div for modal-fade class  -->
        
        <!-- Modal For Edit User-->

        <div class="modal " id="myModal" 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">Edit User</h4>

                    </div>

                    <div class="modal-body">

                        <div class="form-group">

                            <label for="uname">Username:</label>

                            <input type="uname" class="form-control" id="uname" placeholder="Enter Your Username">

                        </div>

                        <div class="form-group">

                            <label for="fname">First Name:</label>

                            <input type="fname" class="form-control" id="fname" placeholder="Enter Your First Name">

                        </div>

                        <div class="form-group">

                            <label for="lname">Last Name:</label>

                            <input type="lname" class="form-control" id="lname" placeholder="Enter Your Last Name">

                        </div>

                        <div class="dropdown">

                            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                                User Role

                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu">

                                <li><a href="#">User</a></li>

                                <li><a href="#">Admin</a></li>

                                <li><a href="#">Manager</a></li>

                            </ul>

                        </div>



                        <div class="dropdown">

                            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                                Enabled / Disable

                                <span class="caret"></span>
                            </button>

                            <ul class="dropdown-menu">

                                <li><a href="#">User</a></li>

                                <li><a href="#">Admin</a></li>

                                <li><a href="#">Manager</a></li>

                            </ul>

                        </div>

                    </div> <!--End Of  div for moda-body class  -->



                    <div class="modal-footer">

                        <button type="button" class="btn btn-success" data-dismiss="modal">Update</button>

                    </div>

                </div><!--End Of  div for moda-content class  -->



            </div><!--End Of  div for modal-dialog class  -->

        </div><!--End Of  div for modal-fade class  -->



        <table class="table table-striped" >

            <thead>

                <tr>

                    <th><b>UserID</b></th>

                    <th><b>User Name</b></th>

                    <th><b>Name</b></th>

                    <th><b>Role</b></th>

                    <th><b></b></th>

                </tr>

            </thead>

            <tbody id = "idOftbody">

               

            </tbody>

        </table>

    </div><!--End of  div for container class  -->
</div>
2

Sorry I can’t be of any help with that.

I see it is a form, but only parts of the whole form. Could it be that it is the form action causing the freezing?

Just my two cents.

If you could upload the whole page somewhere on your server maybe a “Bootstrap” knowledgable here can look at it and find out.

3

Hi,

Using the code you posted and dropping into a cdn hosted version of bootstrap I don’t get any freeze when the modal opens.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css"></style>
</head>
<body>
<div id="users_page">
  <div class="container">
    <h3>Control Panel Users</h3>
    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#add_new_user_modal">Add New User</button>
    <!-- Modal For Add New User-->
    
    <div class="modal " id="add_new_user_modal" 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">Add New User</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="adduname">Username:</label>
              <input type="adduname" class="form-control" id="adduname" placeholder="Enter New Username">
            </div>
            <div class="form-group">
              <label for="addfname">First Name:</label>
              <input type="addfname" class="form-control" id="addfname" placeholder="Enter First Name">
            </div>
            <div class="form-group">
              <label for="addlname">Last Name:</label>
              <input type="addlname" class="form-control" id="addlname" placeholder="Enter Last Name">
            </div>
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> User Role <span class="caret"></span> </button>
              <ul class="dropdown-menu">
                <li><a href="#">User</a></li>
                <li><a href="#">Admin</a></li>
                <li><a href="#">Manager</a></li>
              </ul>
            </div>
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Enabled / Disable <span class="caret"></span> </button>
              <ul class="dropdown-menu">
                <li><a href="#">Enabled</a></li>
                <li><a href="#">Disable</a></li>
              </ul>
            </div>
          </div>
          <!--End Of  div for moda-body class  -->
          
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
          </div>
        </div>
        <!--End Of  div for moda-content class  --> 
        
      </div>
      <!--End Of  div for modal-dialog class  --> 
      
    </div>
    <!--End Of  div for modal-fade class  --> 
    
    <!-- Modal For Edit User-->
    
    <div class="modal " id="myModal" 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">Edit User</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="uname">Username:</label>
              <input type="uname" class="form-control" id="uname" placeholder="Enter Your Username">
            </div>
            <div class="form-group">
              <label for="fname">First Name:</label>
              <input type="fname" class="form-control" id="fname" placeholder="Enter Your First Name">
            </div>
            <div class="form-group">
              <label for="lname">Last Name:</label>
              <input type="lname" class="form-control" id="lname" placeholder="Enter Your Last Name">
            </div>
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> User Role <span class="caret"></span> </button>
              <ul class="dropdown-menu">
                <li><a href="#">User</a></li>
                <li><a href="#">Admin</a></li>
                <li><a href="#">Manager</a></li>
              </ul>
            </div>
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Enabled / Disable <span class="caret"></span> </button>
              <ul class="dropdown-menu">
                <li><a href="#">User</a></li>
                <li><a href="#">Admin</a></li>
                <li><a href="#">Manager</a></li>
              </ul>
            </div>
          </div>
          <!--End Of  div for moda-body class  -->
          
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal">Update</button>
          </div>
        </div>
        <!--End Of  div for moda-content class  --> 
        
      </div>
      <!--End Of  div for modal-dialog class  --> 
      
    </div>
    <!--End Of  div for modal-fade class  -->
    
    <table class="table table-striped" >
      <thead>
        <tr>
          <th><b>UserID</b></th>
          <th><b>User Name</b></th>
          <th><b>Name</b></th>
          <th><b>Role</b></th>
          <th><b></b></th>
        </tr>
      </thead>
      <tbody id = "idOftbody">
      </tbody>
    </table>
  </div>
  <!--End of  div for container class  --> 
</div>
</body>
</html>

Doers the above freeze for you and if not can you modify the code above to show the problem you are having?

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.