Диалоговое окно jQuery
Я пытаюсь создать диалоговое окно с помощью jquery. В этом диалоговом окне у меня будут условия. Проблема в том, что диалоговое окно отображается только ПЕРВЫЙ РАЗ.
Это код.
JavaScript:
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}
HTML (href):
<a class = "TOClink" href = "javascript:showTOC();">View Terms & Conditions</a>
<div id = "example" title = "Terms & Conditions">1..2..</div>
Проблема, я думаю, в том, что когда вы закрываете диалоговое окно, DIV уничтожается из html-кода, поэтому его больше нельзя отобразить на экране.
Не могли бы вы помочь!
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 10
Похоже, возникла проблема с опубликованным вами кодом. Ваша функция для отображения T&C ссылается на неправильный идентификатор div. Вам также следует подумать о назначении функции showTOC атрибуту onclick после загрузки документа:
$(document).ready({
$('a.TOClink').click(function(){
showTOC();
});
});
function showTOC() {
$('#example').dialog({modal:true});
}
Более краткий пример, который позволяет добиться желаемого эффекта с помощью диалогового окна пользовательского интерфейса jQuery:
<div id = "terms" style = "display:none;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a id = "showTerms" href = "#">Show Terms & Conditions</a>
<script type = "text/javascript">
$(document).ready(function(){
$('#showTerms').click(function(){
$('#terms').dialog({modal:true});
});
});
</script>
См. Второй пример, который я только что добавил.
Я попробовал (скопировал и вставил ur-код, но "LOREM ..." не отображается в диалоговом окне и 2. После нажатия ссылки появляется диалоговое окно, затем, когда я нажимаю кнопку закрытия, а затем снова нажимаю на ссылка, чтобы снова увидеть оглавление, диалоговое окно не появляется ... Не могли бы вы мне помочь :(?
Удалите style = "display: none;" атрибут.
Я столкнулся с той же проблемой (диалоговое окно открывалось только один раз, после закрытия оно не открывалось снова) и попробовал приведенные выше решения, которые не устранили мою проблему. Я вернулся к документации и понял, что совершенно не понимаю, как работает диалог.
Команда $ ('# myDiv'). Dialog () создает / инстанцирует диалог, но не обязательно является правильным способом его открыто. Правильный способ открыть его - создать экземпляр диалога с помощью dialog (), затем использовать dialog ('open'), чтобы отобразить его, и dialog ('close'), чтобы закрыть / скрыть его. Это означает, что вы, вероятно, захотите установить для параметра autoOpen значение false.
Итак, процесс таков: создайте экземпляр диалогового окна в готовом документе, затем прослушайте щелчок или любое другое действие, которое вы хотите отобразить в диалоговом окне. Тогда это будет работать раз за разом!
<script type = "text/javascript">
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
</head>
<body>
<input id = "myButton" name = "myButton" value = "Click Me" type = "button" />
<div id = "myDiv" style = "display:none">
<p>I am a modal dialog</p>
</div>
Мне помогло, моя проблема заключалась в том, что я создавал экземпляр диалога внутри своего обработчика click (), поэтому его нельзя было открыть где-либо еще в коде.
У меня была та же проблема, и я искал способ ее решить, что привело меня сюда. После ознакомления с предложением РаэЛеман я пришел к решению. Вот моя реализация.
В моем событии $ (document) .ready я инициализирую свой диалог, задав для autoOpen значение false. Я также решил привязать событие щелчка к элементу, например кнопке, которая откроет мой диалог.
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() { // do something },
"Cancel": function() { $(this).dialog("close"); }
}
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
});
Затем я убеждаюсь, что функция определена, и именно здесь я реализую метод открытия диалога.
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
Кстати, я тестировал это в IE7 и Firefox, и он отлично работает. Надеюсь это поможет!
Если вам нужно использовать несколько диалоговых окон на одной странице и открывать, закрывать и снова открывать их, хорошо работает следующее:
JS CODE:
$(".sectionHelp").click(function(){
$("#dialog_"+$(this).attr('id')).dialog({autoOpen: false});
$("#dialog_"+$(this).attr('id')).dialog("open");
});
HTML:
<div class = "dialog" id = "dialog_help1" title = "Dialog Title 1">
<p>Dialog 1</p>
</div>
<div class = "dialog" id = "dialog_help2" title = "Dialog Title 2">
<p>Dialog 2 </p>
</div>
<a href = "#" id = "help1" class = "sectionHelp"></a>
<a href = "#" id = "help2" class = "sectionHelp"></a>
CSS:
div.dialog{
display:none;
}
<script type = "text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$('#dialog1').dialog({
autoOpen: false,
show: 'blind',
hide: 'explode'
});
$('#Wizard1_txtEmailID').click(function() {
$('#dialog1').dialog('open');
return false;
});
$('#Wizard1_txtEmailID').click(function() {
$('#dialog2').dialog('close');
return false;
});
//mouseover
$('#Wizard1_txtPassword').click(function() {
$('#dialog1').dialog('close');
return false;
});
});
/////////////////////////////////////////////////////
<div id = "dialog1" title = "Email ID">
<p>
(Enter your Email ID here.)
<br />
</p>
</div>
////////////////////////////////////////////////////////
<div id = "dialog2" title = "Password">
<p>
(Enter your Passowrd here.)
<br />
</p>
</div>
Это немного более кратко, а также позволяет вам иметь разные значения диалогов и т. д. На основе разных событий щелчка:
$('#click_link').live("click",function() {
$("#popup").dialog({modal:true, width:500, height:800});
$("#popup").dialog("open");
return false;
});
Решение RaeLehman работает, если вы хотите только один раз сгенерировать содержимое диалога (или изменить его только с помощью javascript). Если вы действительно хотите каждый раз заново создавать диалог (например, используя класс модели представления и Razor), вы можете закрыть все диалоги с помощью $ (". Ui-dialog-titlebar-close"). Click (); и оставьте autoOpen равным значению по умолчанию true.
Мое решение: удалить некоторые параметры инициализации (например, показать), потому что конструктор не дает результата, если что-то не работает (например, эффект слайда). Моя функция без динамической вставки html:
function ySearch(){ console.info('ysearch');
$( "#aaa" ).dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860
});
$('#aaa').dialog("open");
console.info($('#aaa').dialog("isOpen"));
return false;
}
Даже я столкнулся с подобными проблемами. Вот как я смог решить то же самое
$("#lnkDetails").live('click', function (e) {
//Create dynamic element after the element that raised the event. In my case a <a id = "lnkDetails" href = "/Attendance/Details/2012-07-01" />
$(this).after('<div id=\"dialog-confirm\" />');
//Optional : Load data from an external URL. The attr('href') is the href of the <a> tag.
$('#dialog-confirm').load($(this).attr('href'));
//Copied from jQueryUI site . Do we need this?
$("#dialog:ui-dialog").dialog("destroy");
//Transform the dynamic DOM element into a dialog
$('#dialog-confirm').dialog({
modal: true,
title: 'Details'
});
//Prevent Bubbling up to other elements.
return false;
});
если вы хотите изменить непрозрачность для всего диалогового окна, измените его в jquery-ui.css
/* Overlays */
.ui-widget-overlay
{
background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
opacity: .50;
filter: Alpha(Opacity=80);
}
Я согласен с вами на 100%. Я думаю, что есть другой способ отображения оглавления на той же странице. Проблема в том, что все оглавления отображаются, потому что они находятся в операторе DIV. Есть ли способ, как отображать DIV только тогда, когда кто-то нажимает кнопку ссылки?