Как стилизовать элементы внутри причудливого ящика

Question

Его мой первый раз, используя модальные окна. И я сейчас использую причудливую коробку. Но проблема в том, что я не могу стилизовать элементы внутри нее. Используя обычный стиль, используя css. Я вызываю regprod.php, который является формой создания и помещает его в модальное окно. Но я не вижу стиль, который я применял.

<a id="inline" href="http://localhost/pos/php/regprod.php" ><img src="http://localhost/pos/img/store/add-icon.png"></img></a> 

Я использовал точный адрес, чтобы связать файл CSS для regprod.php:

<link rel="stylesheet" href="http://localhost/pos/css/formstyle.css" /> 

Это выглядит следующим образом:

Как я полагаю, поставить стиль на это

Answer 1

Вы должны использовать JS вместо традиционного CSS для Acces удаленных содержимое IFRAME. That'a пример доступа IFrame с JQuery:

var yourFrame = $(’#yourFrameId’); 
yourFrame.load(function() { 
    yourFrame.contents().find(’#yourElementInFrame’).css('display:block'); 
}); 

Answer 2

класть формаstyle.css внутри материнская страница. Не страница, которую вы вызываете с помощью ajax.

FancyBox извлекает содержание regprod.php затем помещает в DIV (Infact Mant дивы.)

Answer 3

Я добавляю этот ответ для будущей ссылки на эту тему ... Я также нашел с FancyBox стиля в HTML-файл, который вы используете в ваш iFrame. Это хорошо работает, если вы не хотите возиться с JavaScript. Обычно я использую оба варианта, но в этом случае я считаю, что очень просто использовать встроенный или внутренний CSS. Например, здесь приведен фрагмент для формы fancybox, которая хорошо работает:

<form style="font: normal 16px/1.3em Helvetica, Verdana, Arial;" 
    id="ml-form" class="site-form" method="post" action=""> 

    <p style="font-weight: bold; color: #6d6e71; text-align: center;"> 
     Mailing list sign up form</p> 

    <div style="display: none;"> 
     <p id="login_error">Please enter data below...</p> 
    </div> 

    <table style="font-size: 0.8em; font-weight: bold; padding-left: 10px;"> 

    . . . 

</form>