代わりにJqueryUiDialogを使用してこのポップアップを作成するFancybox

fancyboxではなくjquery uidialogでポップアップを作成できません。ここにfancyboxで作成したポップアップのスクリーンショットがあります。しかし、私の個人的な問題ではなく、jquery uidialogを使用してください。私はどうすればよい代わりにJqueryUiDialogを使用してこのポップアップを作成するFancybox

：スクリーンショットのように

画像とXボタンを交換しに示すように、その位置に
メイドXボタン（私は閉じるボタンの写真を持っています）スクリーンショット。

私のHTMLコードです（拡張子がhtmの外部ファイルです）。私はそれを行うことができます[OK]を背景とテキストのCSSの

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

。任意のヘルプ

出典

2016-03-22 Mike Vinyl

作業用スニペットまたはビンを提供できますか？ –

可能であれば、私はちょうどjqueryダイアログのデフォルトクローズの代わりに右側のボタンイメージを置く方法のみを尋ねることができました....申し訳ありませんが、より簡単にはできません –

あなたのhtmlが見えないのでjquery-uiダイアログのようなものです。 jquery-uiのサンプルダイアログでそれを置き換える方法を紹介しますか？ –

ため

おかげであなたはjqueryの-UIからデフォルトのスタイルを上書きするために、CSSにいくつかの変更を行う必要があります。

ボタンは、私は閉じるボタンができるよう.ui-dialogのoverflow:hiddenをオーバーライド注

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

...それはちょうど私があなたを見ることができます方法です正しい位置にありませんダイアログの外側に表示しますが、それは他のものを混乱させないように注意してください。

出典

2016-03-22 15:08:56

ベストアンサー！ありがとう!!!しかし、示された位置にない...私はどのようにそれを行うことができますか？ –

問題は画像であり、CSSでは少し変更されました。今それはOKを見ていますか？ –

はい、しかし今すぐ第2ステップ私はそれを行うことができますか？トップを使用する場合：-5pxそれは隠れます...なぜですか？ –

代わりにJqueryUiDialogを使用してこのポップアップを作成するFancybox

答えて

関連する問題