Javascript jQuery对话框_Javascript_Jquery_Jquery Ui_Dialog

Javascript jQuery对话框

javascript jquery jquery-ui

Javascript jQuery对话框,javascript,jquery,jquery-ui,dialog,Javascript,Jquery,Jquery Ui,Dialog,我试图用jquery创建一个对话框。在这个对话框中，我将有条款和条件。问题是该对话框仅第一次显示这是代码 JavaScript: function showTOC() { $("#TOC").dialog({ modal: true, overlay: { opacity: 0.7, background: "black" } }) } HTML（a href）： 1

我试图用jquery创建一个对话框。在这个对话框中，我将有条款和条件。问题是该对话框仅第一次显示

这是代码

JavaScript:

function showTOC()
{
    $("#TOC").dialog({ 
        modal: true, 
        overlay: { 
            opacity: 0.7, 
            background: "black" 
        } 
    })
}

HTML（a href）：


1..2..

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

你能帮忙吗

谢谢

看起来您发布的代码有问题。您显示T＆C的功能引用了错误的div ID。您应该考虑一旦加载文档也将Stutoc函数分配给OnCutle属性：

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

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

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

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


知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
$（文档）.ready（函数（）{
$（'#showTerms'）。单击（函数（）{
$（“#术语”）.dialog（{modal:true}）；
});
});

我遇到了同样的问题（对话框只会打开一次，关闭后不会再次打开），并尝试了上述解决方案，但没有解决我的问题。我回到文档中，意识到我对对话框的工作原理有一个根本性的误解

$（'#myDiv'）.dialog（）命令创建/实例化对话框，但不一定是打开对话框的正确方法。打开它的正确方法是使用dialog（）实例化对话框，然后使用dialog（'open'）显示它，使用dialog（'close'）关闭/隐藏它。这意味着您可能需要将autoOpen选项设置为false

因此，这个过程是：在documentready上实例化对话框，然后侦听单击或任何您想要显示对话框的操作。然后它会工作，一次又一次

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


jQuery（文档）.ready（函数（）{
jQuery（“我的按钮”）。单击（showDialog）；
//变量到引用窗口
$myWindow=jQuery（'#myDiv'）；
//实例化对话框
$myWindow.dialog（{高度：350，
宽度：400，
莫代尔：是的，
位置：'中间'，
自动打开：错误，
标题：“你好，世界”，
覆盖：{不透明度：0.5，背景：“黑色”}
});
}
);
//用于显示对话框的函数
var showDialog=函数（）{
//如果内容是用css隐藏的，你需要这个
$myWindow.show（）；
//打开对话框
$myWindow.dialog（“打开”）；
}
//函数关闭对话框，可能由对话框中的按钮调用
var closeDialog=函数（）{
$myWindow.dialog（“关闭”）；
}
我是一个模态对话

我也遇到了同样的问题，当时我正在寻找一种解决方法，正是这种方法把我带到了这里。在回顾了RaeLehman提出的建议后，我找到了解决方案。这是我的实现

在my$（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();
    });
});

接下来，我要确保定义了该函数，这就是我实现dialog open方法的地方

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;
    }

JS代码：
$（“.sectionHelp”）。单击（函数（）{
$（“#dialog”+$（this.attr（'id'））.dialog（{autoOpen:false}）；
$（“#dialog”+$（this.attr（'id'））.dialog（“open”）；
});
HTML:
对话1
对话2
CSS:
div.dialog{
显示：无；
}


//增加默认动画速度以放大效果
$.fx.speeds.\u默认值=1000；
$（函数（）{
$（'#dialog1'）。dialog({
自动打开：错误，
节目：“盲人”，
隐藏：“爆炸”
});
$（“#向导1_txtEmailID”）。单击（函数（）{
$（'dialog1'）。dialog（'open'）；
返回false；
});
$（“#向导1_txtEmailID”）。单击（函数（）{
$（'dialog2'）。dialog（'close'）；
返回false；
});
//鼠标盖
$（'#向导1\u txtPassword'）。单击（函数（）{
$（'dialog1'）。dialog（'close'）；
返回false；
});
});
/////////////////////////////////////////////////////

（在此处输入您的电子邮件ID。）



////////////////////////////////////////////////////////

（在此处输入您的密码。）


 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;
});

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;
    });

/* 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);
}