hộp thoại jquery trên nút bấm

Tôi đang cố gắng để có được một hộp thoại jquery để khởi động trên một nút bấm nhưng dường như không hoạt động. Bất kỳ trợ giúp sẽ được đánh giá cao:hộp thoại jquery trên nút bấm

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

Cảm ơn!

Nguồn

2012-11-27 user763460

Dòng này

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

nghĩa vụ phải được

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

Cũng thêm niềng răng }); .. Có thể được bỏ qua nếu đây là cú đúp đóng cửa cho DOM handler Ready

Check Fiddle

Nguồn

2012-11-27 20:27:09

+1 @Sushanth! Đây là câu trả lời. – daniel0mullins

@Sushanth tốt sleuthing. Bạn phát hiện ra nó. +1 – gibberish

Đảm bảo bạn đang tham khảo thư viện jQuery và jQueryUI, theo ví dụ của tôi bên dưới.

Hãy thử điều này:

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

Nguồn

2012-11-27 20:31:04 gibberish

Hãy thử mã này, nó làm việc cho tôi.

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

Nguồn

2016-04-02 10:04:17

hộp thoại jquery trên nút bấm

Trả lời

Các vấn đề liên quan