jQuery 대화 상자

https://stackoverflow.com/questions/366696

21-08-2019
|

문제

jQuery와 대화 상자를 만들려고합니다. 이 대화 상자에는 이용 약관이 있습니다. 문제는 대화 상자가 처음으로 만 표시된다는 것입니다.

이것은 코드입니다.

자바 스크립트 :

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

html (href) :

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>

<div id="example" title="Terms & Conditions">1..2..</div>

내가 생각하는 문제는 대화 상자를 닫으면 HTML 코드에서 DIV가 파괴된다는 것입니다.

도와주세요!

감사

해결책

게시 한 코드에 문제가있는 것 같습니다. T & C를 표시하는 기능은 잘못된 DIV ID를 참조합니다. 문서가로드되면 showtoc 함수를 Onclick 속성에 할당하는 것을 고려해야합니다.

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

다른 팁

나는 같은 문제를 겪었고 (대화가 한 번만 열리고, 닫은 후에는 다시 열리지 않을 것입니다), 위의 솔루션을 시도하여 내 문제를 해결하지 못했습니다. 나는 문서로 돌아가서 대화가 어떻게 작동하는지에 대한 근본적인 오해가 있음을 깨달았습니다.

$ ( '#mydiv'). chindog () 명령은 대화 상자를 생성/인스턴스화하지만 반드시 올바른 방법은 아닙니다. 열려 있는 그것. 그것을 열 수있는 올바른 방법은 대화 상자 ()로 대화 상자를 인스턴스화 한 다음 대화 상자 ( 'Open')를 사용하여 표시하고 대화 상자 ( '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의 제안을 검토 한 후에는 솔루션으로 이어졌습니다. 내 구현은 다음과 같습니다.

내 $ (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를 사용하여 수정) 작동합니다. 실제로 대화를 매번 재생하려면 (예 :보기 모델 클래스 및 면도기를 사용하여) $ ( ". ui-dialog-titlebar-close")로 모든 대화를 닫을 수 있습니다. (); click (); 그리고 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;
});

내 해결책 : 무언가가 작동하지 않으면 생성자가 생성 할 수 없기 때문에 (예 : 슬라이드 효과) 몇 가지 init 옵션 (예 : Show)을 제거하십시오. 동적 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);
}

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow