JqueryUiDialog yerine Fancych

kullanarak bu pencereyi açarak, jQuery uidialog yerine fancybox ile pop-up yapamıyorum. İşte popup'umun fantezisi ile yapılan ekran görüntüsü. Ancak kişisel sorunlarım için jQuery uidialog'u kullanın. i nasılJqueryUiDialog yerine Fancych

: ekran görüntüsünde görüldüğü gibi

görüntü ile X düğmesine değiştirin gösterildiği gibi o pozisyonda
Yapımı X düğmesini (i kapatma düğmesine pic var) ekran görüntüsü.

İşte html kodum (htm uzantılı harici bir dosyada).

<div class="box_principale_mail"> 
<div class="box_wrapper_mail"> 
    <div class="page1"> 
     <div class="box_div_campo"> 
      <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Destinatario:</span> 
      </div> 
      <div class="box_input_dati_mail"> 
       <input readonly="readonly" class="textboxform" id="testoDestinatario" value="' + email + '" type="text" /> 
      </div> 
     </div> 
     <div class="box_div_campo"> 
      <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Nome:</span> 
      </div> 
      <div class="box_input_dati_mail"> 
       <input class="textboxform" id="testoNome" type="text" /> 
      </div> 
     </div> 
     <div class="box_div_campo"> 
      <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Cognome:</span> 
      </div> 
      <div class="box_input_dati_mail"> 
       <input class="textboxform" id="testoCognome" type="text" /> 
      </div> 
     </div> 
     <div class="box_div_campo"> 
      <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Città:</span> 
      </div> 
      <div class="box_input_dati_mail"> 
       <div class="div_citta"> 
        <input class="textboxform" id="testoCitta" type="text" placeholder="Città" /> 
       </div> 
       <div class="div_prov"> 
        <input class="textboxform" id="testoProvincia" maxlength="2" type="text" placeholder="Prov." /> 
       </div> 
      </div> 
     </div> 
     <div class="box_div_campo"> 
      <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Messaggio:</span> 
      </div> 
      <div class="box_input_dati_mail"> 
       <textarea class="textboxform" id="testoMessaggio"></textarea> 
      </div> 
     </div> 
     <div class="box_div_campo"> 
      <div class="box_etichetta_dati_mail"> 
       <div class="etichetta_mail" id="testoPrivacy" onclick="Flippa()">Privacy</div> 
       <input id="checkPrivacy" type="checkbox" /> 
      </div> 
      <div class="box_input_dati_mail"> 
       <input class="pulsanteInviaEmail" type="button" value="invia" onclick="InviaEmail(\'' + email + '\', \'Richiesta informazioni\')" /> 
      </div> 
     </div> 
    </div> 
    <div class="page2"> 
     <div class="etichetta_mail" id="titoloprivacy">Condizioni della Privacy</div> 
     <div class="box_div_campo"> 
      <textarea id="testoContenutoPrivacy" class="boxrotondato"></textarea> 
     </div> 
     <div class="box_campo_div"> 
      <input class="pulsanteInviaEmail" type="button" value="Rifiuta" onclick="TogliSpuntaFlippa()" /> 
      <input class="pulsanteInviaEmail" type="button" value="Accetta" onclick="SpuntaEFlippa()" /> 
     </div> 
    </div> 
</div>

arka plan ve ben bunu yapabilirim tamam metin css için

. herhangi bir yardım

kaynak

2016-03-22 Mike Vinyl

Çalışma pasajı veya bölmesi tedarik edebilir misiniz? –

Mümkünse sadece jpery iletişim kutusunun varsayılanı yerine sağ taraftaki görüntü yerine nasıl konulacağını sordum .... üzgünüm ama bundan daha kolay yapamadım –

Bunu sizin için sordum çünkü html'iniz görünmüyor jquery-ui iletişim kutusu gibi. Örnek jquery-ui iletişim kutusunda nasıl değiştirileceğini göstereceğim mi? –

için

Teşekkür Sen jquery-ui gelen varsayılan stilleri geçersiz kılmak css içinde birkaç değişiklik yapmak gerekir.

düğmesi sana gösterebilirim sadece yolu doğru konumda değil ..

.ui-dialog { 
 
    overflow:visible !important; 
 
} 
 

 
.ui-dialog-titlebar-close { 
 
    background:url(http://i.stack.imgur.com/YqnsO.png) no-repeat center center !important; 
 
    width:31px !important; 
 
    height:29px !important; 
 
    border:0 !important; 
 
    margin: -40px -25px 0 0 !important; 
 
} 
 

 
.ui-dialog-titlebar-close .ui-icon { 
 
    background:none !important; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Dialog - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script> 
 
     $(function() { 
 
     $("#dialog").dialog(); 
 
     }); 
 
    </script> 
 
    </head> 
 
    <body> 
 

 
    <div id="dialog" title="Basic dialog"> 
 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
    </div> 
 
    </body> 
 
</html>

Not Ben .ui-dialog çok yakın düğmeye overflow:hidden overrided olabilir iletişim kutusunun dışında görüntüleniyor, ancak başka bir şeyin bozulmadığına dikkat edin.

kaynak

2016-03-22 15:08:56

En iyi cevap! Teşekkürler!!! Ama gösterilen şekilde değil ... nasıl yapabilirim? –

Sorun, görüntüdeki görüntü ve css'de küçük bir değişiklik oldu. Şimdi iyi görünüyor değil mi? –

Evet ama şimdi ikinci adım nasıl yapabilirim? Üst kullanımda: -5px gizler ..... neden? –

cevap

İlgili konular