同じページに複数のポップアップがあるページを作成しようとしています。ページの読み込み時に最初のポップアップを開いて作業できるようにしたい
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#sign_up").lightbox_me({centered: true, onLoad: function() { $('#sign_up').find ('input:first').focus()}});
}); // document ready
</script>
<body onload="$('#sign_up').trigger('click');">
しかし、ユーザーがそのポップアップのリンクをクリックして、同じページにとどまり、別のポップアップを開くことができるようにしたいと考えています。また、2 番目のポップアップから、ユーザーがリンクをクリックして 3 番目のポップアップを開くことができるようにしたいと考えています。
このコードを使用して、最初のポップアップ (sign_up) のリンクをクリックできます。ここをクリックすると、2 番目のポップアップ (sign1) が開きますが、最初のポップアップはまだ遅れています (2 番目のポップアップが小さいため、表示できます)。
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
}
$('#try-1').click(function(e) {
$("#sign_up").lightbox_me({centered: true, onLoad: function() {
$("#sign_up").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign1').lightbox_me({centered: true, onLoad: function() { $('#sign1').find('input:first').focus()}});
}
$('#try-2').click(function(e) {
$("#sign1").lightbox_me({centered: true, onLoad: function() {
$("#sign1").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
私はjqueryに非常に慣れておらず、基本的に現在のコードをコピーして微調整しようとしましたが、うまくいきませんでした。