مسج مربع الحوار

https://stackoverflow.com/questions/366696

21-08-2019
|

سؤال

أحاول القيام مربع الحوار مع مسج.في مربع الحوار هذا أنا ذاهب إلى الشروط والأحكام.المشكلة هي أن مربع الحوار يتم فقط عرض للمرة الأولى.

هذا هو رمز.

جافا سكريبت:

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 والرجوع إلى معرف شعبة الخطأ. يجب النظر في تعيين وظيفة showTOC إلى السمة عند _ النقر مرة واحدة يتم تحميل الوثيقة أيضا:

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

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

وهناك مثال أكثر إيجازا الذي يحقق النتيجة المرجوة باستخدام الحوار مسج 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>

نصائح أخرى

أنا واجهت نفس المشكلة (الحوار سيكون مفتوحا فقط مرة واحدة ، بعد إغلاق فهو لن يفتح مرة أخرى) ، و جربت الحلول المذكورة أعلاه والتي لم تحدد مشكلتي.عدت إلى مستندات و أدركت أنني كان سوء فهم أساسي لكيفية الحوار يعمل.

على $('#myDiv').الحوار() ينشئ الأمر/instantiates الحوار ، ولكن ليس بالضرورة الطريقة الصحيحة فتح ذلك.الطريقة الصحيحة لفتح هذا هو مثيل الحوار مع الحوار () ، ثم استخدم مربع الحوار (فتح) لعرض و الحوار('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>

وكان لي نفس المشكلة وكان يبحث عن وسيلة لحلها والتي جلبت لي هنا. بعد الإطلاع على اقتراح من RaeLehman أنها دفعتني إلى الحل. وهنا تنفيذ بلدي.

في بلدي $ (الوثيقة) الحدث .ready I تهيئة الحوار التي أجريتها مع 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 وفايرفوكس وأنه يعمل بشكل جيد. ويساعد هذا الأمل!

إذا كنت بحاجة إلى استخدام مربعات الحوار متعددة على صفحة واحدة ومفتوحة، وثيقة واعادة فتحها الأعمال التالية أيضا:

 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 ويعمل إذا كنت ترغب فقط في توليد محتوى الحوار مرة واحدة (أو فقط تعديله باستخدام جافا سكريبت). إذا كنت فعلا تريد لتجديد الحوار في كل مرة (على سبيل المثال، باستخدام فئة عرض نموذج والشفرة)، ثم يمكنك إغلاق كافة الحوارات مع $ (النقر) ( "واجهة المستخدم-الحوار-شريط العنوان من مسافة قريبة.")؛ وترك مجموعة autoOpen إلى قيمته الافتراضية صحيح.

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

وإذا كنت ترغب في تغيير التعتيم لجميع الحوار ثم تغيير في مسج-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);
}

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow