I open one bootstrap modal from another modal but my modal is scrollable other not scrollable

Question

I open the first modal using javascript and open other modals from one another. First modal is ok and other work properly too but problem occur in second and third modal. The proble is that scroll goes to background my modal not scroll when content is over flow.

Give me solution for this problm. And give other menthods creating this kinds of landing style

<div id="beginnerModal" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content dealBg">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Hey ${memberFirstName}, <small>Update Company Information</small></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="cold-md-3 col-sm-3 col-xs-12">
                        <div id="">
                           <img src="../images/dummyCompanyLogo.png" id="logo" class="img-responsive">
                        </div>
                        <script>
                            function readURL(input) {
                                if (input.files && input.files[0]) {
                                    var reader = new FileReader();

                                    reader.onload = function (e) {
                                        $('#logo')
                                                .attr('src', e.target.result)
                                               /* .width(150)
                                                .height(200);*/
                                    };

                                    reader.readAsDataURL(input.files[0]);
                                }
                            }
                        </script>

                    </div>
                    <div class="cold-md-9 col-sm-9 col-xs-12 form-horizontal form-label-left">
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Company Logo</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="file" onchange="readURL(this);" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Phone</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control"  />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Location</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Domain Name</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control" />
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <p class="pull-left">Step 1 of 3</p>
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal"  data-backdrop="static" data-target="#personalInfo" >Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal"  data-backdrop="static" data-target="#personalInfo">Skip</button>
            </div>
        </div>
    </div>
</div>

<div id="personalInfo" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content dealBg">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><small>Update Personal Information</small></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="cold-md-3 col-sm-3 col-xs-12">
                        <div id="userImage">
                            <img src="../images/dummyProfilePhoto.jpg" id="userPic" class="img-responsive">
                        </div>
                        <script>
                            function showPic(input) {
                                if (input.files && input.files[0]) {
                                    var reader = new FileReader();

                                    reader.onload = function (e) {
                                        $('#userPic')
                                                .attr('src', e.target.result)
                                        /* .width(150)
                                         .height(200);*/
                                    };

                                    reader.readAsDataURL(input.files[0]);
                                }
                            }
                        </script>

                    </div>
                    <div class="cold-md-9 col-sm-9 col-xs-12 form-horizontal form-label-left">
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Company Logo</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="file" onchange="showPic(this);" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Phone</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control"  />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Location</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">Domain Name</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control" />
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <p class="pull-left">Step 2 of 3</p>
                <button type="button" class="btn btn-primary" >Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal"  data-backdrop="static" data-target="#inviteUser">Skip</button>
            </div>
        </div>
    </div>
</div>
<div id="inviteUser" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog ">
        <div class="modal-content dealBg">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"> <small>Invite your colleagues</small></h4>
            </div>
            <div class="modal-body">
                <div class="row" >

                    <div class="cold-md-10 col-sm-10 col-xs-12 form-horizontal form-label-left" id="users">

                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">User 1</label>
                            <div class="col-md- col-sm-9 col-xs-12">
                                <input type="email" class="form-control" name="user1" placeholder="Email Address"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 control-label">User 2</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" class="form-control" name="user2" placeholder="Email Address"/>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <script>
                        $(function(){
                            var user=2;

                            $('#addNewUser').on('click',function(){
                                user++;
                                if(user<=12){
                                var r= $('<div class="form-group"> ' +
                                        '<label class="col-md-3 col-sm-3 col-xs-12 control-label">User ' + user+
                                        ' </label> ' +
                                        '<div class="col-md-9 col-sm-9 col-xs-12">' +
                                        '<input type="text" class="form-control" name=" user'+user+'" placeholder="Email Address"/>' +
                                        '</div></div>');
                                $("#users").append(r);
                                }
                            });
                        });
                    </script>
                    <div class="cold-md-10 col-sm-10 col-xs-12 form-horizontal form-label-left">
                        <div class="form-group">
                            <label class="col-md-3 col-sm-3 col-xs-12 pull-right control-label">
                                <a href="#" id="addNewUser"><i class="fa fa-plus"> </i> Add User</a>
                            </label>
                        </div>
                    </div>
                 </div>

            </div>
            <div class="modal-footer">
                <p class="pull-left">Step 3 of 3</p>
                <button type="button" class="btn btn-primary" >Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Skip</button>
            </div>
        </div>
    </div>
</div>


<script>
    $( document ).ready(function() {
        $('#beginnerModal').modal('show');
    });
</script>**strong text**

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

I think this guy had the same problem as you. If your problem is that you can't scroll the content in the modal.

How to put scrollbar only for modal-body in bootstrap modal dialog

edited May 23 '17 at 11:46

Community

1
1

answered Mar 27 '17 at 21:37

pudi

43
7

I already try this one but working. I am doing same as doing in the following site and want to make like that one. I am shocked why not work for me. And I have no any idea about this :( :( http://jsbin.com/pokuwehira/edit?html,css – Dipendra Ghatal Mar 27 '17 at 22:03
Please post the full code or a JSbin/JSfiddle because it's easier to reproduce the error – pudi Mar 27 '17 at 22:25

I open one bootstrap modal from another modal but my modal is scrollable other not scrollable

1 Answers1