Диалоговое окно jQuery
https://stackoverflow.com/questions/366696
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я пытаюсь создать диалоговое окно с помощью jquery.В этом диалоговом окне у меня будут правила и условия.Проблема в том, что диалоговое окно отображается только в ПЕРВЫЙ РАЗ.
Это и есть код.
JavaScript:
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}
HTML (a href):
<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>
<div id="example" title="Terms & Conditions">1..2..</div>
Проблема, я думаю, заключается в том, что когда вы закрываете диалоговое окно, DIV удаляется из html-кода, поэтому он больше никогда не сможет отображаться на экране.
Не могли бы вы, пожалуйста, помочь!
Спасибо
Решение
Похоже, возникла проблема с опубликованным вами кодом.Ваша функция для отображения 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>
Другие советы
Я столкнулся с той же проблемой (диалоговое окно открывалось только один раз, после закрытия оно больше не открывалось) и попробовал описанные выше решения, которые не устранили мою проблему.Я вернулся к документам и понял, что у меня фундаментальное непонимание того, как работает диалоговое окно.
Команда $('#myDiv').dialog() создает / создает экземпляр диалога, но это не обязательно правильный способ Открыть IT.Правильный способ открыть его - создать экземпляр диалогового окна с помощью dialog(), затем использовать dialog ('открыть') для его отображения и dialog ('закрыть'), чтобы закрыть / скрыть его.Это означает, что вы, вероятно, захотите установить для параметра AutoOpen значение false.
Таким образом, процесс заключается в:создайте экземпляр диалогового окна в document ready, затем прослушайте щелчок или любое другое действие, которое вы хотите отобразить в диалоговом окне.Тогда это будет работать, раз за разом!
<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>
У меня была такая же проблема, и я искал способ ее решения, который привел меня сюда.После рассмотрения предложения, сделанного Рейлеманом, оно привело меня к решению.Вот моя реализация.
В моем событии $(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;
}
Решение RaeLehman работает, если вы хотите сгенерировать содержимое диалогового окна только один раз (или изменить его только с помощью javascript).Если вы действительно хотите каждый раз восстанавливать диалоговое окно (например, используя класс view model и Razor), то вы можете закрыть все диалоги с помощью $(".ui-dialog-titlebar-close").click();и оставьте для параметра AutoOpen значение по умолчанию true.
<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;
});
Мое решение:удалите некоторые параметры инициализации (например.показать), потому что конструктор не выдает результат, если что-то не работает (например, эффект слайда).Моя функция без динамической вставки html:
function ySearch(){ console.log('ysearch');
$( "#aaa" ).dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860
});
$('#aaa').dialog("open");
console.log($('#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);
}
