jQuery对话框 [英] jQuery Dialog Box

问题描述

我试图用jquery做一个对话框。在此对话框中，我将有条款和条件。问题是对话框只显示第一次。

这是代码。

JavaScript：

  function showTOC（）
 {
 $（＃TOC）。 
 modal：true，
 overlay：{
 opacity：0.7，
 background：black
} 
}）
} 
  

HTML（a href）：

 < a class =TOClinkhref =javascript：showTOC（）;>查看条款&状况及LT; / A> 
 
< div id =exampletitle =条款与条件> 1..2 ..< / div> 
  

我认为的问题是，当您关闭对话框时，DIV将从html代码中销毁你不能再在屏幕上显示。

可以帮忙！

谢谢

解决方案

看起来你发布的代码有问题。您显示T& C的功能是引用错误的div id。一旦加载文档，您应该考虑将showTOC函数分配给onclick属性：

  $（document）.ready {
 $（'a.TOClink'）。click（function（）{
 showTOC（）; 
}）; 
}）; 
 
 function showTOC（）{
 $（'＃example'）。dialog（{modal：true}）; 
} 
  

使用jQuery UI对话框实现所需效果的更简洁的例子是：

 < div id =termsstyle =display：none;> 
 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut im im。。。。。。。。。。。。。。。。。。。。。。。。 Duis aute irure dolor in reprehenderit in featate velit esse cillum dolore eu fugiat nulla pariatur。异教徒圣诞节，不是虔诚的，不要吝啬的，因为我们的主要是妄想的动作。 
< / div> 
< a id =showTermshref =＃>显示条款& amp; amp;状况及LT; / A> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（'＃showTerms'）。click（function（）{
 $（'＃terms'）。dialog（{modal： true}）; 
}）; 
}）; 
< / script> 
  

Im trying to do a dialog box with jquery. In this dialog box Im going to have terms and conditions. The problem is that the dialog box is only displayed for the FIRST TIME.

This is the code.

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>

The problem I think is that when you close the dialog box the DIV is destroyed from the html code therfore it can never be displayed again on screen.

Can you please help!

Thanks

解决方案

Looks like there is an issue with the code you posted. Your function to display the T&C is referencing the wrong div id. You should consider assigning the showTOC function to the onclick attribute once the document is loaded as well:

$(document).ready({
    $('a.TOClink').click(function(){
        showTOC();
    });
});

function showTOC() {
    $('#example').dialog({modal:true});
}

A more concise example which accomplishes the desired effect using the jQuery UI dialog is:

   <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 &amp; Conditions</a>      
   <script type="text/javascript">
       $(document).ready(function(){
           $('#showTerms').click(function(){
               $('#terms').dialog({modal:true});   
           });
       });
   </script>

这篇关于jQuery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！