I have written a code to show popup using a bootstrap modal.

It worked, but all element is blocked. I don't know what wrong with my code.

Here is my code:

<div id="add_data_Modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add data</h4>
            </div>
            <div class="modal-body">
                <form method="post" name="insert_form" id="insert_form">
                    <label>Số thuê bao</label>
                    <input type="text" name="name" id="name" class="form-control" />
                    <br />
                    <label>Speed number</label>
                    <input type="text" name="spd_number" id="spd_number" class="form-control" />
                    <br />
                    <label>Dial number</label>
                    <input type="text" name="dial_number" id="dial_number" class="form-control"/>   
                    <br />
                    <input type="submit" name="insert" id="insert" value="ADD" class="btn btn-success"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I have written a code to show popup using a bootstrap modal.

It worked, but all element is blocked. I don't know what wrong with my code.

Here is my code:

<div id="add_data_Modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add data</h4>
            </div>
            <div class="modal-body">
                <form method="post" name="insert_form" id="insert_form">
                    <label>Số thuê bao</label>
                    <input type="text" name="name" id="name" class="form-control" />
                    <br />
                    <label>Speed number</label>
                    <input type="text" name="spd_number" id="spd_number" class="form-control" />
                    <br />
                    <label>Dial number</label>
                    <input type="text" name="dial_number" id="dial_number" class="form-control"/>   
                    <br />
                    <input type="submit" name="insert" id="insert" value="ADD" class="btn btn-success"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

• javascript
• bootstrap-modal

• Im guessing the CSS for the id="add_data_Modal" is above your modal which is why you cant access it but I am not sure because you didnt provide any of your CSS code. – crazymatt Commented Aug 23, 2017 at 2:42
• 1 Use correctly with the documentation it will work. You must have added some extra css if this is right – Ashish sah Commented Aug 23, 2017 at 2:43
• I've created a fiddle jsfiddle/d8v4w6zo and it's working fine, try to look at your js console maybe there is some errors – Aref Ben Lazrek Commented Aug 23, 2017 at 3:29
• and post js and css code used – Aref Ben Lazrek Commented Aug 23, 2017 at 3:30
• Agree with @Ashishsah. If you're going to use something like Bootstrap, don't start randomly throwing in your own CSS unless you know what you're doing. – ESR Commented Aug 23, 2017 at 3:37

3 Answers 3

You can solve your issue,following this link.

bootstrap modal examples

As if have different css files,check that css files also.because some times you added classes or ID can be override.

Please check your code, I think the cause may be due to your code redundant or missing a close tag. Usually missing or excess div tags.

Bootstrap document indicate: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.You’ll likely run into issues when nesting a .modal within another fixed element.

If you realy can't find error, don't know whether parent container of id="add_data_Modal" against the Bootstrap's rules. Try below code:

$('#add_data_Modal').appendTo('body');

Using jquery to place your modal HTML to body. In case you can sure your modal HTML in a top-level position.

Update--------

If someone using Angular this works - sort of. But... this has a nasty side effect as well: Because Angular re-renders the view every time it's accessed, a new #add_data_Modal element is created each and everytime.

This behavior causes duplication of the the elements and on occasion causes the wrong data to e up.

Fix this by clearing out the modal before append to body like below:

$('#"body>#add_data_Modal').remove();
$('#add_data_Modal').appendTo('body');