如何将simplemodal定位在button / div之上

时间:2015-02-12 19:57:16

标签: javascript jquery html css

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $("#basic-modal .basic").click(function (e) {
        $("#basic-modal-content").modal();

    //Close the window  
    document.onclick = function(event){
      var hasParent = false;
        for(var node = event.target; node != document.body; node = node.parentNode)
        {
          if(node.id == 'simple_close_listener'){
            hasParent = true;
            break;
          }
        }
      if(hasParent){
        //alert('inside');
      }
      else{
        $.modal.close();
      }
    }
    //End close the window

    // Add class specific to browser
    if (navigator.userAgent.search("MSIE") >= 0) {
        $("#basic-modal-content div:nth-child(2)").addClass("ie_simple");
        $("#simplemodal-container").width(385).height(235);
        //alert("Browser is InternetExplorer");
    }
    //Check if browser is Chrome or not
    else if (navigator.userAgent.search("Chrome") >= 0) {      
         $("#basic-modal-content div:nth-child(2)").addClass("crom_simple");
         $("#simplemodal-container").width(390).height(300);
         //$("#simplemodal-container").css({"position": "relative", "left": "460px", "top": "20px"});
         //alert("Browser is Chrome");
    }
     //Check if browser is Firefox or not
     else if (navigator.userAgent.search("Firefox") >= 0) {
        $("#basic-modal-content div:nth-child(2)").addClass("firefox_simple");
        $("#basic-modal-content > a").addClass("btn_simple");
        //var x = $("#basic-modal-content").offset();
       // $("#simplemodal-container").css({"position": "relative", "left": x.left, "top": x.top});
        $("#simplemodal-container").width(340).height(170);
        //alert("Browser is FireFox");
     }
     //Check if browser is Safari or not
     else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        $("#basic-modal-content div:nth-child(2)").addClass("safari_simple");
        $("#simplemodal-container").width(370).height(340);
        //alert("Browser is Safari");
     }
     //Check if browser is Opera or not
     else if (navigator.userAgent.match(/Opera|OPR\//)) {
        $("#basic-modal-content div:nth-child(2)").addClass("opera_simple");
        $("#simplemodal-container").width(390).height(300);
        //alert("Browser is Opera");
     }

        return false;
    });
});

我正在尝试将simplemodal窗口放在按钮顶部。 我的HTML看起来像这样。 。 。

<div id='basic-modal'>
    <input type='button'  class='basic' id="basic_btn"/>    
</div>

<div id="basic-modal-content">
    <div id="contener"> </div>
    <div id="basic-modal-img"></div>
</div> 

我试图在按钮上弹出基本模型,即id =“basic_btn 我想动态设置位置,即只需点击一下按钮,窗口就会弹出略高于按钮的位置。

0 个答案:

没有答案