Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Question: Modal - how to close with jQuery? #69

Closed
michalduda opened this issue Mar 3, 2015 · 8 comments
Closed

Question: Modal - how to close with jQuery? #69

michalduda opened this issue Mar 3, 2015 · 8 comments
Labels
question

Comments

@michalduda
Copy link

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!
@michalduda michalduda changed the title Modal - close with jQuery? Question: Modal - how to close with jQuery? Mar 3, 2015
@JimBobSquarePants
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

Thank you!

Best of luck! 😄

@michalduda
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JimBobSquarePants @michalduda