1

As the title, how can I close the modal using the button in remote content?

Here is the original page, index.html:

<a href="modal.html" data-toggle="modal" data-target="#testModal">open modal</a>
<div id="testModal" class="modal fade">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">

    </div>
  </div>
</div>

and here is the page I want to open in the modal, modal.html:

<p>Hi, I am a modal</p>
<button class="btn btn-primary">close</button>

<script type="text/javascript">
  $(function() {
    $("#closeModal").click(function() {
      // do something...(Ajax)
      $("#testModal").modal('hide');
    });
  });
</script>

and I want the close button to close the modal in index.html but not using data-dismiss. Here is the full example in Plunker:http://plnkr.co/edit/EGjtma?p=info

Lynn Chen
  • 89
  • 1
  • 8
  • 1
    Read this: http://stackoverflow.com/questions/16493280/close-bootstrap-modal – ZiTAL Nov 14 '16 at 08:19
  • @ZiTAL Do you mean using `toggle` to close the modal? I have already set `toggle` but I still want the button is able to close the modal. – Lynn Chen Nov 14 '16 at 08:24
  • "funciton" is incorrect, use "function" and open the console in the browser to watch the errors, for firefox use firebug – ZiTAL Nov 14 '16 at 08:32
  • @ZiTAL Sorry for the spelling mistake, I've updated the question and Plunker but it still could not work. – Lynn Chen Nov 14 '16 at 08:53

2 Answers2

2
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Do nothing with any function, dismiss modal is build-in on Boostrap

Rico Nguyen
  • 21
  • 2
1

I've checked you're code, and I found that what the modal does is grapping the whole content of modal.html file and place it inside a div with class name "modal-content"

So that's very easy, you can write this code in the close button inside the modal.html file and this will allow you to close the modal

<button class="btn btn-primary" onclick="$('#testModal').hide()">close</button>

Also I've few notes for you

  1. There are many scripts that you've added and I'm not sure that you needed
  2. Your code contains some Javascript errors, so check the browser console to fix them
  3. Don't duplicate JS / CSS includes in modal.html, If these files already exist in the main file no need to add them again.
Doaa Magdy
  • 518
  • 5
  • 20
  • Thank you for your answer and notes. But what if I need to do something before closing the modal? I have updated my question. – Lynn Chen Nov 14 '16 at 08:57
  • 1
    @LynnChen With pleasure, You can create a method as following | function closeModal() { // Your Logic then $('#testModal').hide(); } | and make the button click pointing to this function – Doaa Magdy Nov 14 '16 at 09:02
  • This way can immediately close the modal, but if `// do something...` contains Ajax function and I want to close the modal after Ajax is done, is there a solution? – Lynn Chen Nov 14 '16 at 09:15
  • 1
    @LynnChen :) .. Yes there is, you can call Ajax and place the model hide ( $('#testModal').hide(); ) calling inside the success callback function of the ajax call, check this post it may help you http://stackoverflow.com/questions/12160482/jquery-ajax-do-stuff-in-success-or-complete-callbacks – Doaa Magdy Nov 14 '16 at 09:20
  • I use your way on Plunker, but it still not working. – Lynn Chen Nov 15 '16 at 02:02