hộp thoại jquery bật lên

Question

Tôi đang cố gắng hiển thị hộp thoại bật lên này khi liên kết này được nhấp nhưng nó không hoạt động đối với tôi. Tôi đã làm việc này trong ba giờ qua và điều này đang trở nên quá bực bội đối với tôi.

Dưới đây là html của tôi

<a href="#" id="contactUs">Contact Us</a> 
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div> 

Và đây là javascript của tôi, đây là trong một tập tin bên ngoài.

$("#contactUs").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
}); 

Tôi đã sử dụng các liên kết này, nhưng vô ích cho tôi.

http://jqueryui.com/demos/dialog/#modal

http://jqueryui.com/demos/dialog/#default

Xin vui lòng cho tôi biết nếu có một ý tưởng, nhiều đánh giá cao, cảm ơn.

Answer 1

HTML Điều này là tốt:

<a href="#" id="contactUs">Contact Us</a>     
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div> 

Bạn cần phải khởi tạo Dialog (không chắc chắn nếu bạn đang làm điều này):

$(function() { 
    // this initializes the dialog (and uses some common options that I do) 
    $("#dialog").dialog({ 
    autoOpen : false, modal : true, show : "blind", hide : "blind" 
    }); 

    // next add the onclick handler 
    $("#contactUs").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
    }); 
}); 

Answer 2

Vấn đề của bạn là lời kêu gọi hộp thoại

Nếu bạn không khởi chạy hộp thoại, bạn không phải vượt qua "mở" để hiển thị hộp thoại:

$("#dialog").dialog(); 

Ngoài ra, mã này cần phải có chức năng $(document).ready(); hoặc thấp hơn các yếu tố để nó hoạt động.

Answer 3

Bạn có thể kiểm tra liên kết này: http://jqueryui.com/dialog/

Mã này sẽ làm việc tốt

$("#dialog").dialog(); 

Answer 4

Nó khá đơn giản, HTML đầu tiên phải được bổ sung:

<div id="dialog"></div> 

Sau đó, nó phải là được khởi tạo:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery('#dialog').dialog({ 'autoOpen': false }); 
    }); 
</script> 

Sau này bạn có thể hiển thị nó theo mã:

jQuery('#dialog').dialog('open'); 

Answer 5

Sử dụng dưới đây Mã, Nó làm việc cho tôi.

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#dialog').dialog({ 
       autoOpen: false, 
       title: 'Basic Dialog' 
      }); 
      $('#contactUs').click(function() { 
       $('#dialog').dialog('open'); 
      }); 
     }); 
</script> 

Answer 6

Bạn có thể sử dụng tập lệnh sau. Nó hoạt động cho tôi

Bản thân phương thức bao gồm một thùng chứa phương thức chính, đầu trang, phần thân và chân trang. Chân trang chứa các hành động, trong trường hợp này là nút OK, tiêu đề giữ tiêu đề và nút đóng và nội dung chứa nội dung phương thức.

$(function() { 
     modalPosition(); 
     $(window).resize(function() { 
      modalPosition(); 
     }); 
     $('.openModal').click(function (e) { 
      $('.modal, .modal-backdrop').fadeIn('fast'); 
      e.preventDefault(); 
     }); 
     $('.close-modal').click(function (e) { 
      $('.modal, .modal-backdrop').fadeOut('fast'); 
     }); 
    }); 
    function modalPosition() { 
     var width = $('.modal').width(); 
     var pageWidth = $(window).width(); 
     var x = (pageWidth/2) - (width/2); 
     $('.modal').css({ left: x + "px" }); 
    } 

Tham khảo: - Modal popup using jquery in asp.net