jQuery 对话框 [英] jQuery Dialog Box

问题描述

我正在尝试用 jquery 做一个对话框.在这个对话框中，我将有条款和条件.问题是对话框只显示第一次.

这是代码.

JavaScript:

函数 showTOC(){$("#TOC").dialog({模态:真，叠加:{不透明度:0.7，背景:黑色"}})}

HTML(a href):

<a class="TOClink" href="javascript:showTOC();">查看条款&条件<div id="example" title="条款和条件">1..2..</div>

我认为的问题是，当您关闭对话框时，DIV 会从 html 代码中销毁，因此它永远不会再次显示在屏幕上.

你能帮忙吗！

谢谢

解决方案

您发布的代码似乎存在问题.您显示 T&C 的函数引用了错误的 div id.您还应该考虑在加载文档后将 showTOC 函数分配给 onclick 属性:

$(document).ready({$('a.TOClink').click(function(){显示目录()；});});函数 showTOC() {$('#example').dialog({modal:true});}

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

 
Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.
<a id="showTerms" href="#">显示条款&amp;条件<script type="text/javascript">$(document).ready(function(){$('#showTerms').click(function(){$('#terms').dialog({modal:true});});});

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屋！