Comment styliser des éléments dans une boîte fantaisie

Question

C'est la première fois que j'utilise des fenêtres modales. Et j'utilise actuellement une boîte de fantaisie. Mais le problème est que je ne peux pas styliser les éléments à l'intérieur. Utilisation du style habituel en utilisant css. J'appelle regprod.php qui est un formulaire de création et le place dans la fenêtre modale. Mais je ne peux pas voir le style que j'ai appliqué.

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

J'utilise l'URL exacte pour lier le fichier css regprod.php:

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

Il ressemble à ceci:

Comment suis-je suppose de mettre le style dessus

Answer 1

Vous devez utiliser JS au lieu de CSS traditionnel acces contenu à distance iFrame. That'a un exemple d'un accès iFrame avec jQuery:

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

Answer 2

mettre formstyle.css à l'intérieur de la page mère. Pas la page que vous appelez avec ajax.

fancybox va chercher le contenu de regprod.php met alors dans un div (enfait Mant divs.)

Answer 3

J'ajoute cette réponse pour la future référence sur le sujet ... Je l'ai aussi trouvé avec le style fancybox dans le fichier HTML que vous utilisez dans votre iFrame. Cela fonctionne bien, si vous ne voulez pas jouer avec JavaScript. Je finis généralement par utiliser les deux, mais dans ce cas je pense qu'il serait très facile d'utiliser les CSS internes ou internes. Par exemple, voici un extrait pour un formulaire fancybox qui fonctionne bien:

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