0

テキストフィールドと保存ボタンを備えた、名前を取得するためのポップアップウィンドウを作成しました。

"type a name"入力した名前がボタンの下の Web ページに表示されるように、ユーザーはテキスト フィールドに自分の名前を入力できます。

.jsファイルは、

jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div         
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }   
});

CSS。

#backgroundPopup { 
    position: fixed;
    display:none;
    height:100%;
    width:100%; 
}
#toPopup {

    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #ccc;
    display: none;
    font-size: 14px;
    left: 50%;
    margin-left: -402px;
    position: fixed;
    top: 10%;
    width: 250px;
    z-index: 2;
}

htmlは

<body>
      <a href="#" class="topopup"><button>type a name</button></a>
        <div id="toPopup">       
    <div> 
           <p><label>type a name</label><input type="text" value="" />
          </p>
          <button>save</button>
        </div> 
      </div> 
   </body>

1.入力したテキストはボタンの下に表示されます<button>type a name</button>。

2.ポップアップボックスがフェードタイプで表示されているのですが、ポップアップ表示中にフェードを解除したい場合の対処法

ありがとう

4

2 に答える 2

0

なぜjqueryダイアログを使わないのですか?

http://jqueryui.com/dialog

フォームやボタンなど、必要なものをダイアログに追加できます。

フォームの定義

var firstselection = true;
var form = $('<div id="form"></div>')
        .html("<div id='example'>"<div id='divSceltaDest' align='center'><input type=text id='input'....
                    .....");

ボタンの定義

dialbtn = {
    'call' : {
        text : 'What you want',
        click : function() {
            call();
        }
    },
    'cancel' : {
        text : 'Cancel',
        click : function() {
            form.dialog("close");
        }
    }
}

ダイアログを準備し、すべてをクリック ボタンに関連付ける

form.dialog({
    autoOpen : false,
    title : 'title',
    modal : true,
    width : "auto",
    height : "auto",
    autoResize : true,
    show : "fade",
    hide : "fade",
    position : 'top',
    close : function(ev, ui) {
        //alert('close');
        $(this).remove();
                ...   
    },
    buttons : dialbtn
});
于 2013-04-29T11:02:11.797 に答える
0

ポップアップ表示中fadeIn()に変更。show()ポップアップの表示中に遅延を追加する理由がわかりません。

$("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").show(); // fadein popup div         
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }

入力したテキストをボタンの下に追加する次のメソッドを追加しました。

アップデート

 $("#save").on("click",function(){
        $("a.topopup").after("<br/>" + $("#someId").val());
        $("#toPopup").fadeOut();  // for hiding popup with fade effect. 
    });

saveボタンとテキストボックスにもIDを追加しました。

<a href="#" class="topopup"><button>type a name</button></a>
        <div id="toPopup">       
    <div> 
           <p><label>type a name</label><input type="text" value="" id="someId" />
          </p>
          <button id="save">save</button>
        </div> 
      </div>

デモを見る

于 2013-04-29T10:48:59.983 に答える