Question

在我提交表单后，下面的行会打开一个弹出模式。

<input class="js__p_start" type="submit"  value="submit" name="submit"/>

我想从JS函数打开这个弹出窗口，我将检查表单字段是否为空，然后只调用此弹出模式，否则将提示填写表单字段。

我调用的任何方式都使用来自另一个JS函数的类调用此弹出窗口。

如果您需要源代码，请参阅http://www.hunt4flat.com

的源代码

这是我的代码：

<script>

$(document).ready(function(){
$("#hidden_form").submit(function(){
var mobile = $("#mobile").val();
var name = $("#name").val();


var dataString = 'mobile='+ mobile + '&name='+ name;

if(name=='')
{
alert("Please Enter your name");
}
else
{

$.ajax({
type: "POST",
url: "ritz.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
//I Want to call Popup here, so that popup will appear only after user  properly entereed form fields

}
});
}
return false;
});
});
</script>

怎么做？

JS文件是：

(function($) {
$.fn.simplePopup = function(event) {
var simplePopup = {
  settings: {
    hashtag: "#/",
    url: "popup",
    event: event || "click"
  },

  initialize: function(link) {
    var popup = $(".js__popup");
    var body = $(".js__p_body");
    var close = $(".js__p_close");
    var routePopup = simplePopup.settings.hashtag + simplePopup.settings.url;

    var cssClasses = link[0].className;

    if (cssClasses.indexOf(" ") >= 0) {
      cssClasses = cssClasses.split(" ");

      for (key in cssClasses) {
        if (cssClasses[key].indexOf("js__p_") === 0) {
          cssClasses = cssClasses[key]
        }
      };
    }

    var name = cssClasses.replace("js__p_", "");

    // We redefine the variables if there is an additional popap
    if (name !== "start") {
      name = name.replace("_start", "_popup");
      popup = $(".js__" + name);
      routePopup = simplePopup.settings.hashtag + name;
    };

    link.on(simplePopup.settings.event, function() {
      simplePopup.show(popup, body, routePopup);
      return false;
    });

    $(window).on("load", function() {
      simplePopup.hash(popup, body, routePopup);
    });

    body.on("click", function() {
      simplePopup.hide(popup, body);
    });

    close.on("click", function() {
      simplePopup.hide(popup, body);
      return false;
    });

    $(window).keyup(function(e) {
      if (e.keyCode === 27) {
        simplePopup.hide(popup, body);
      }
    });
  },


  centering: function(popup) {
    var marginLeft = -popup.width()/2;
    return popup.css("margin-left", marginLeft);
  },

  show: function(popup, body, routePopup) {
    simplePopup.centering(popup);
    body.removeClass("js__fadeout");
    popup.removeClass("js__slide_top");
    location.hash = routePopup;
    document.getElementById("menu_but").style.visibility = "hidden";
    document.getElementById("toTop").style.visibility = "hidden";
    document.getElementById("cbp-spmenu-s1").style.visibility = "hidden";
  },

  hide: function(popup, body) {
    popup.addClass("js__slide_top");
    body.addClass("js__fadeout");
    location.hash = simplePopup.settings.hashtag;
    document.getElementById("menu_but").style.visibility = "visible";
    document.getElementById("toTop").style.visibility = "visible";
    document.getElementById("cbp-spmenu-s1").style.visibility = "visible";
  },

  hash: function(popup, body, routePopup) {
    if (location.hash === routePopup) {
      simplePopup.show(popup, body, routePopup);
    }
  }
};


return this.each(function() {
  var link = $(this);
  simplePopup.initialize(link);
});
};
})(jQuery);

Answer 1

使用我的库：

$.ajax({
    type: "POST",
    url: "ritz.php",
    data: dataString,
    cache: false,
    success: function(result){
    alert(result);
        //I Want to call Popup here, so that popup will appear only after user  properly entereed form fields
        var popup = new jPopup({
            title: "<h2>Succes</h2>",
            content: "<p>Form has been sent succesfully, results: "+result+"</p>",
            buttons: [{
                text: "Close"
            }]

        });
        popup.open();
    }
});

图书馆：https://github.com/seahorsepip/jPopup

你可以用jquery ui对话框做同样的事情，但是jquery ui对话框需要太多的js并且在我看来并不是很好：P

Jquery popup模式，如何从js函数调用

1 个答案: