Если флажок установлен, всплывающее окно с содержимым HTML со страницы регистрации

Question

Если флажок установлен, всплывающее окно с содержимым HTML со страницы регистрации

0

Если флажок установлен, вы можете добавить fancybox с содержимым HTML на странице регистрации

Мой текущий JS-код приведен ниже. Предупреждение в основном является заполнителем для HTML, который я хочу захватить и отобразить.

$("#Register").click(function() {
    if($(this).is(':checked')) {
        alert("This is a fancybox! Register here.")
        $('#CheckoutOptions').fancybox('');
    }
})

Код HTML:

<form id="CheckoutOptions" name="CheckoutOptions">
    <label class="inline">
    <input type="checkbox" id="Register" name="CheckoutOptions" value="Register">
     Register Account </label>
     <br>
    <label class="inline">
    <input type="checkbox" id="Guest" name="CheckoutOptions" value="Guest">
    Guest Checkout </label>
</form>

Внутри HTML будет форма, в которой пользователь может просто зарегистрировать учетную запись. В конце регистрации учетной записи, в случае успеха, я также хотел бы закрыть Fancybox и перезагрузить исходную веб-страницу.

Это то, что вы могли бы мне помочь?

JSfiddle находится здесь: http://jsfiddle.net/5CS4D/3/

user1879703 20 сен. 2013, в 16:36

Источник

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Barbara Laird · Answer 1 · 2013-09-20T15-46-00.000Z

Ваша скрипка не включает js правильно. Кроме того, вам нужно сказать fancybox, что вы хотите отобразить. Я просто поместил форму html в строку, но вы можете получить ее, как хотите.

$("#Register").click(function () {
     if ($(this).is(':checked')) {
         var htmlStr = '<div class="form"><form>First Name:<input type="text" maxlength="20"></input><br />Last Name:<input type="text" maxlength="20"></input></form></div>';
         $.fancybox(htmlStr, {
             'width': 950,
             'height': 1100,
             'autoScale': false,
             'transitionIn': 'none',
             'transitionOut': 'none',
             'hideOnContentClick': false
         });
     }
 });

http://jsfiddle.net/dpauz/

N.P. SINGH · Answer 2 · 2013-09-20T12-07-00.000Z

См. Прилагаемую ссылку здесь: - Это то же самое, что вы хотите:

Открыть ссылку

Вы можете узнать исходный код вместе с примером.

Вы также можете попробовать следующую ссылку: - http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt

Хороший ответ, но я бы предпочел не использовать jQuery UI - я использую достаточно JS-библиотек.