Передача параметра в модальное окно
Приветствую!
Есть такой код модального диалога:
<script>
$(document).ready(function () {
$('a.btn-ok, #dialog-overlay, #dialog-btn').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
$(window).resize(function () {
if (!$('#dialog-box').is(':hidden')) popup();
});
});
function popup(message) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
$('#dialog-message').html(message);
}
</script>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message" align="center">
<img src="">
</div>
</div>
</div>
<a href="#dialog-box" rel="test.gif" onclick="javascript:popup();">test.gif</a>
Подскажите как передать название изображения (параметр) в диалоговое окно? |
onclick="popup('<img src=\'test.gif\'>');"
|
Цитата:
|
Щито?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(document).ready(function () {
$('a.btn-ok, #dialog-overlay, #dialog-btn').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
$(window).resize(function () {
if (!$('#dialog-box').is(':hidden')) popup();
});
});
function popup(message) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
$('#dialog-message').html(message);
}
</script>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message" align="center">
<img src="">
</div>
</div>
</div>
<a href="#dialog-box" rel="test.gif" onclick="popup('<img src=\'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif\'>');">test.gif</a>
|
Aetae,
Отлично работает, только вот еще проблема, при добавлении display:none не срабатывает, а именно:
<style>
#dialog-box {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #eee;
width: 428px;
position: absolute;
z-index: 5000;
display: none;
}
</style>
А без этого окно остается открытым... |
Цитата:
|
Это следует из вашего кода.
|
Цитата:
|
Есть. Написать именно то, что вам нужно. Мне это делать неохота.
|
Может кто нибудь знает как провести выборку из адресной строки?
|
Вот решил попробовать сделать так но безрезультатно, что не так в этой конструкции?
<script src="//code.internetrange.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
id = $(this.element).attr('rel');
$('a.btn-ok, #dialog-overlay, #dialog-btn').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
$(window).resize(function () {
if (!$('#dialog-box').is(':hidden')) popup();
});
});
function popup(message) {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
$('#dialog-message').html(message);
}
</script>
<div id="dialog-box" style="display:none;">
<a href="#" id="dialog-btn" title="Закрыть окно">x</a>
<div class="dialog-content" style="padding: 20px;">
<div id="dialog-message" align="center">
<script>document.write('<img src='id'>')</script>
</div>
</div>
</div>
<a href="#" rel="98.png" onclick="popup()">98.png</a>
|
Так ничего дельного и не нашел
Пробовал делать так
function getid() {
var image = $("#image").attr('rel');
$.post('getresourseid.php', {
image: image
},
function (data) {
$("#adimage").html(data);
}
);
}
<div id="dialog-box"> <a href="#" id="dialog-btn" title="Закрыть окно">x</a> <div class="dialog-content" style="padding: 20px;"> <div id="dialog-message" align="center"> <div id="adimage"></div> </div> </div> </div> <a href="#" rel="1.png" id="image" onclick="popup();getid();">1</a> <a href="#" rel="2.png" id="image" onclick="popup();getid();">2</a> В этом случае если кликаю по ссылке все отправляется, но если потом кликнуть по второй, то отправляться будет предыдущая картинка.. Потом так:
function getid() {
var image = $("#image").attr('rel');
document.getElementById("adimage").innerHTML = '<img src=\'+image+\'>';
var elements = document.getElementById("adimage").getElementsByTagName("script");
for (var i=0,len=elements.length;i<len;i++) { eval.call(window,elements[i].innerHTML); }
}
Здесь просто вместо картинки отображается надпись "image" .. |
| Часовой пояс GMT +3, время: 19:11. |