jquery dialog popup

Question

Я пытаюсь получить эту всплывающую форму диалога, чтобы отобразиться, когда эта ссылка нажата, но она не работает для меня. Я работаю над этим в течение последних трех часов, и это становится слишком расстраивающим для меня.

Вот мой HTML

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

А вот мой JavaScript, это во внешнем файле.

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

Я использовал эти ссылки, но безрезультатно для меня.

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

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

Пожалуйста, дайте мне знать, если иметь идеи, очень высокую оценку, спасибо.

Answer 1

Этот HTML отлично:

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

Вы должны инициализировать диалог (не уверен, что если вы делаете это):

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

Ваша проблема заключается в вызове для диалогового

Если вы не инициализируете диалоговое окно, вам не нужно пропускать «открытое» для его отображения:

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

Кроме того, этот код должен быть включен в функцию $(document).ready(); или быть ниже элементов, которые будут работать.

Answer 3

Вы можете проверить эту ссылку: http://jqueryui.com/dialog/

Этот код должен работать нормально

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

Answer 4

Это довольно просто, первый HTML должен быть добавлен:

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

Затем он должен быть начато:

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

После этого вы можете показать его по коду:

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

Answer 5

Использование ниже код, он работал для меня.

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

Answer 6

Вы можете использовать следующий скрипт. Это сработало для меня

Сам модаль состоит из основного модального контейнера, заголовка, тела и нижнего колонтитула. Нижний колонтитул содержит действия, которые в этом случае являются кнопками ОК, заголовок содержит заголовок и кнопку закрытия, а тело содержит модальный контент.

$(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" }); 
    } 

не смотрите: - Modal popup using jquery in asp.net