2012-11-27 17 views
5

पर क्लिक करें मैं एक बटन क्लिक पर लॉन्च करने के लिए एक jquery संवाद प्राप्त करने का प्रयास कर रहा हूं लेकिन काम नहीं कर रहा है। किसी भी मदद की सराहना की जाएगी:बटन पर jquery संवाद

$('#wrapper').dialog({ 
 
     autoOpen: false, 
 
     title: 'Basic Dialog' 
 
    }); 
 
    $('#opener').click(function() { 
 
     $(this).dialog('open'); 
 
     return false; 
 
    }); 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<button id="opener">Open the dialog</button> 
 
    <div id="wrapper"> 
 
    <p>Some txt goes here</p> 
 
    </div>

धन्यवाद!

उत्तर

8

इस लाइन

$(this).dialog('open'); // this here corresponds to the #opener div 

$('#wrapper').dialog('open'); 

इसके अलावा अतिरिक्त ब्रेसिज़ }); होना चाहिए .. अगर यह डोम तैयार हैंडलर के लिए बंद करने ब्रेस है पर ध्यान नहीं दिया जा सकता है

Check Fiddle

+0

+1 @ सुशांत! यह जवाब है। – daniel0mullins

+0

@ सुशांत अच्छी नींद। आपने इसे देखा +1 – gibberish

2

सुनिश्चित करें कि आप नीचे दिए गए उदाहरण के अनुसार, jQuery और jQueryUI पुस्तकालयों का संदर्भ दे रहे हैं।

इस प्रयास करें:

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" /> 

     <script type="text/javascript"> 
      $(document).ready(function() { 

       $('#wrapper').dialog({ 
        autoOpen: false, 
        title: 'Basic Dialog' 
       }); 
       $('#opener').click(function() { 
        $('#wrapper').dialog('open'); 
//     return false; 
       }); 
      }); 
     </script> 
    </head> 
<body> 

<button id="opener">Open the dialog</button> 
<div id="wrapper"> 
    <p>Some txt goes here</p> 
</div> 
1

इस कोड की कोशिश करें, यह मेरे लिए काम करता है।

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Dialog - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> 
<script> 
$(document).ready(function() { 
    $(function() { 
    console.log('false'); 
    $("#dialog").dialog({ 
     autoOpen: false, 
     title: 'Test' 
    }); 
    }); 

    $("button").click(function(){ 
    console.log("click"); 
     $(this).hide(); 
     $("#dialog").dialog('open'); 
    }); 
}); 
</script> 
</head> 
<body> 
<button id="open">Open Dialog box</button> 
<div id="dialog" title="Basic dialog"> 
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
</body> 
</html> 
संबंधित मुद्दे