javascript - How to close the modal popup? - Stack Overflow

admin管理员组

文章数量:1023129

this is my bootstrap modal code

  <form class="form-horizontal" method="post" name="addform" id="formid">
    <div id="myModal" >
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Add Question</h3>
    </div>
   <div class="modal-footer">
    <input type="button"  onClick="aj_add_question(<?=$id?>);" class="btn btn-primary" id="add_button" name="Add" value="Add Question">
   <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div> 
    </div>

    <div class="modal-footer">
    <input type="button"  value="Add Page"  onclick="aj_add_page();" class="btn btn-primary" />
    <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div>
 </form>

now onclick

Add Question

i have to close current popup

then i have written code

<script>
 $(document).ready(function(){
alert("Question Added..");
$('#formid').hide();
});
</script>

it will hide but get screen black

this is my bootstrap modal code

  <form class="form-horizontal" method="post" name="addform" id="formid">
    <div id="myModal" >
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Add Question</h3>
    </div>
   <div class="modal-footer">
    <input type="button"  onClick="aj_add_question(<?=$id?>);" class="btn btn-primary" id="add_button" name="Add" value="Add Question">
   <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div> 
    </div>

    <div class="modal-footer">
    <input type="button"  value="Add Page"  onclick="aj_add_page();" class="btn btn-primary" />
    <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div>
 </form>

now onclick

Add Question

i have to close current popup

then i have written code

<script>
 $(document).ready(function(){
alert("Question Added..");
$('#formid').hide();
});
</script>

it will hide but get screen black

• javascript
• php
• bootstrap-modal

Share Improve this question Follow edited Feb 7 at 7:30 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Oct 7, 2014 at 10:08 CoderbabaCoderbaba 1311 gold badge11 silver badge55 bronze badges 4

• Try close the modal as $('#myModal').modal('hide'); – Gowri Commented Oct 7, 2014 at 10:11
• Try this: $("#modal").modal("hide"); – prava Commented Oct 7, 2014 at 10:12
• updated my edit close the modal with model id not the form id $('#myModal').modal('hide'); – Gowri Commented Oct 7, 2014 at 10:19
• Are oyu sure this problem is in any way related to PHP? What have you tried to resolve it? – Nico Haase Commented Jun 10, 2024 at 10:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I think you are not using modal popup syntax properly, can you try the following:

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodaltitle" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
              **--- put your form here**
            </div>
            <div class="modal-footer">
            </div>
         </div>
     </div>
</div>

Then, as others have suggested use $("#mymodal").modal('hide')

this is my bootstrap modal code

  <form class="form-horizontal" method="post" name="addform" id="formid">
    <div id="myModal" >
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Add Question</h3>
    </div>
   <div class="modal-footer">
    <input type="button"  onClick="aj_add_question(<?=$id?>);" class="btn btn-primary" id="add_button" name="Add" value="Add Question">
   <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div> 
    </div>

    <div class="modal-footer">
    <input type="button"  value="Add Page"  onclick="aj_add_page();" class="btn btn-primary" />
    <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div>
 </form>

now onclick

Add Question

i have to close current popup

then i have written code

<script>
 $(document).ready(function(){
alert("Question Added..");
$('#formid').hide();
});
</script>

it will hide but get screen black

this is my bootstrap modal code

  <form class="form-horizontal" method="post" name="addform" id="formid">
    <div id="myModal" >
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Add Question</h3>
    </div>
   <div class="modal-footer">
    <input type="button"  onClick="aj_add_question(<?=$id?>);" class="btn btn-primary" id="add_button" name="Add" value="Add Question">
   <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div> 
    </div>

    <div class="modal-footer">
    <input type="button"  value="Add Page"  onclick="aj_add_page();" class="btn btn-primary" />
    <button type="button" class="btn btn" data-dismiss="modal" aria-hidden="true">cancel</button>
    </div>
 </form>

now onclick

Add Question

i have to close current popup

then i have written code

<script>
 $(document).ready(function(){
alert("Question Added..");
$('#formid').hide();
});
</script>

it will hide but get screen black

• javascript
• php
• bootstrap-modal

Share Improve this question Follow edited Feb 7 at 7:30 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Oct 7, 2014 at 10:08 CoderbabaCoderbaba 1311 gold badge11 silver badge55 bronze badges 4

• Try close the modal as $('#myModal').modal('hide'); – Gowri Commented Oct 7, 2014 at 10:11
• Try this: $("#modal").modal("hide"); – prava Commented Oct 7, 2014 at 10:12
• updated my edit close the modal with model id not the form id $('#myModal').modal('hide'); – Gowri Commented Oct 7, 2014 at 10:19
• Are oyu sure this problem is in any way related to PHP? What have you tried to resolve it? – Nico Haase Commented Jun 10, 2024 at 10:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I think you are not using modal popup syntax properly, can you try the following:

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodaltitle" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
              **--- put your form here**
            </div>
            <div class="modal-footer">
            </div>
         </div>
     </div>
</div>

Then, as others have suggested use $("#mymodal").modal('hide')

本文标签： javascriptHow to close the modal popupStack Overflow