ResponsiveBP/Responsive

Question: Modal - how to close with jQuery?

michalduda opened this issue · 8 comments

michalduda commented

Hi!

I have one, probably simple question.
Unfortunately I can't figure it out ;)

What is the command to close the modal with jquery (called from a target page)?
The action should be pretty much the same as clicking the 'x' symbol.

And an example :)
There are to pages:
INDEX.php
CONTENT.php

Index has a link that opens content in a modal.

How to close the modal

  • without using esc or ‘x’
  • using $(document).ready() and $(object).click() function?

I'll be really grateful for help!

JimBobSquarePants commented

Hi there,

The signature to close a loaded modal is as follows.

$("Element_you_clicked_to_launch_the_modal").modal("hide");

There's a list of methods here.

http://responsivebp.com/javascript/modal/#methods

Hope that helps. 😄

michalduda commented

Thank you :) It is really helpful!

I read the modal documentation page a couple of times
but I used $("Element_you_clicked_to_hide_the_modal").modal("hide");
instead of
$("Element_you_clicked_to_launch_the_modal").modal("hide"); ;)

Btw there is a small mistake on the page:
".modal("hide")
Show the modal."
There should probably be:
".modal("hide")
Hide the modal."

I was also trying to trigger the "hide" function without clicking any element.
Simplified example:

  1. On index.php a#open-modal is clicked
  2. Content.php is loaded in a modal

Is there a way to put some code into content.php that closes the modal?
I've tried document.ready() function and object.load() function, but it fails.
i.e.
$(document).ready(function(){
$("a#open-modal").modal("hide");
});

Thank you!

JimBobSquarePants commented

Thanks for that, I've updated the documentation.

If the content.php is in the same domain as index.php and assuming that you are clicking an element within the modal then you should be able to do something like this:

// Use "on" to delegate event handling to allow for ajax loaded objects.
$(document).on("click","element_in_content.php_selector", function(event){
    // Prevent default action.
    event.preventDefault();

    // The modal stores the current modal trigger in its data so you can target that property.
    $(".modal").data("currentModal").modal("hide");
});
michalduda commented

Thank you.
But what about the situation when there is no element clicked?
When a certain page is opened, it should just close the modal (without any additional actions taken by user)?

JimBobSquarePants commented

Are you trying to detect whether someone clicks to a certain page when the modal contains an iframe?

If your page is within an iframe though there is no way to detect the current page if you have changed it from the original.

Otherwise there's event's that are fired when a modal is shown.

http://responsivebp.com/javascript/modal/#events

You could use the same code from within that click event I demonstrated to do the same thing.

michalduda commented

I'm working with some php scripts that are dynamically changing the page (opened in modal).
I'll work on it some more and I'll try to combine those methods you described :)

Thank you again for your reply and the marvellous work you did with the Responsive!
It is really impressive.
All the best!

JimBobSquarePants commented

Thank you!

Best of luck! 😄

michalduda commented

I've spent a couple of days trying to figure it out but I'm stuck. If it is not a problem please look at it (if you’ll have some spare time of course).

There are 3 files:
Index.php

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8" />

  <!-- styles -->
  <link href="http://responsivebp.com/assets/css/responsive.min.css" rel="stylesheet" />

  <!-- scripts -->
  <script src="http://responsivebp.com/assets/js/vendor/jquery-2.1.3.min.js"></script>
  <script src="http://responsivebp.com/assets/js/responsive.min.js"></script>

</head>
<body>

  <a href="target.php" class="modal-trigger" data-modal>Show modal</a>

</body>
</html>

Target.php

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8" />

  <!-- styles -->
  <link href="http://responsivebp.com/assets/css/responsive.min.css" rel="stylesheet" />

  <!-- scripts -->
  <script src="http://responsivebp.com/assets/js/vendor/jquery-2.1.3.min.js"></script>
  <script src="http://responsivebp.com/assets/js/responsive.min.js"></script>

</head>
<body>

<script>

  $(document).ready(function(){

    //Close button function 
    $(".close-button").click(function(){
        $(".modal-trigger").modal("hide");
    });

    //Transfering form data back to modal via ajax
    $('#edit').submit(function(e){

      e.preventDefault();

      var content = $('#content').val();
      var dataString = 'content=' + content;


      $.ajax({
        type: "POST",
        url: "target.php",
        data: dataString,
        cache: false,
        success: function(html){
            $('.modal-content').html(html);
        }
      });
    });
  });

</script>

<form action="" method="post" id="edit">
  <input type="text" name="content" value="content">
  <input type="submit" name="submit" value="submit">
</form>

<?php 
  //
  if(isset($_POST['content'])){
    //Database update scripts

    //SCRIPT USED TO CLOSE THE MODAL
    include('script.php');
  } ?>

<a href="" class='close-button'>close</a>

</body>
</html>

Script.php

<?php
  echo
    '<script>
      $(".modal-trigger").modal("hide");
    </script>';
?>

tried also

 $(".modal").data("currentModal").modal("hide");

and

 $("a").trigger("click");

The aim is to automatically (without additional clicking) close the modal by the script included.
The chain of actions:
User clicks .modal-trigger -> modal opens -> user inputs some data -> user clicks ‘submit’ -> php is executed -> data is updated in db and modal closes

No idea why it doesn't work :D