CODEWITHSUNDEEP
jquerymodal-dialog
chenchinchi
chenchinchi

Reputation: 13

How to trigger a click on a link(for modal) using jQuery

I am from TW, and my English is not good ..

I use this modal plugin: http://kylefox.ca/jquery-modal/examples/

The plugin have to action with the href. I try to talk - -

I have 2 questions

  1. I can't use $("#ex1").modal() or $("#ex1").modal('show') to show my dialog - it has to link with a example: 

    <a href-"#ex1" rel="modal:open">xxx</a>

    so i tried 

    $("#myid a").trigger('click'),

    but cant action. how to action the a function.... Of course i can use CSS to make tag a like a button , but I cant close the #ex1 and open #ex2 

    <a href-"#ex1" rel="modal:open">xxx</a> --open      <a href-"#ex1" rel="modal:close">xxx</a>--close)

  2. How to use the way like $("#ex1").mydal('open') or something to open my dialog ?

Off course there are so money plugin like this . but this plugin is most sample and cant change my theme or screen...

thx all (OMG poor Eng..)

Upvotes: 0

Views: 18789

Answers (1)

John S
John S

Reputation: 21482

I'm not sure why you say you can't use:

$('#ex1').modal();

Because it does open the div with id="ex1" as a modal.

jsfiddle

If you do have an <a> element with href="#ex1" and rel="modal:open", you can also programmatically open the modal with:

$('#ex1Link').trigger('click');

(Where ex1Link is the id value of the <a> element.)

jsfiddle

In case you are not properly including the libraries, which would cause the Uncaught TypeError: undefined is not a function error you are getting, here is a complete page. Just make sure the jquery.modal.js and jquery.modal.css files are in the same directory as this page.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Modal</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen" />
<script>
$(function () {
    $('#openBtn').click(function() {
        $('#ex1').modal();
    });
});
</script>
</head>
<body>
<div id="ex1" style="display: none;">
<p>Thanks for clicking. <a href="#" rel="modal:close">Close</a> or press ESC</p>
</div>
<p><button type="button" id="openBtn">OPEN</button></p>
</body> 
</html>

Upvotes: 2

Related Questions