Question

是否有可能在不使用插件在线的情况下创建完整的，响应式的jQuery模式？排除CSS可以是无限的。

Answer 1

是否有可能创建一个完整的，响应迅速的弹出窗口不超过6行jQuery？

我给你带来了一个好消息。你不需要jQuery。而且这只是一条罪行。你可以展示一些东西，问一些东西，或者问他们的选择。

confirm("Did you like my answer?"); // Press OK!
alert("Alert! There's a fire in your browser!!!");
prompt("What's your try?");

这些功能，哇。

Answer 2

以下是答案

HTML

<input type="button" value="show1" id="popup1">
<div class="simple_popup_container" id="popup1_popup">
   <div class="simple_popup_close">x</div>
    <div class="simple_popup_body">You can write any content the width will automatically adjust.</div>
</div>

CSS

body{margin:0;}

.Simple_popup_wrapper {
    background:rgba(0,0,0,0.8);
    z-index:9999999;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
}
.simple_popup_container {
    display:table;
    margin:auto;
    max-width:95%;
    position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.simple_popup_close {
    float:right;
    cursor:pointer;
    margin:-10px -10px 0px 0px;
    background:#fff;
    height:20px;
    width:14px;
    border-radius:30px;
    padding:2px 0px 0px 8px;
    border:1px solid #ccc;
    color: #999;
    font-family: arial;
}
.simple_popup_close:hover {
    background:#000;
    color: #fff;
}
.simple_popup_body {
    min-height:300px;
    background:#fff;
    color:#000;
    padding:10px;
    border-radius: 10px;
}

JQuery的

$(document).ready(function () {

$('.simple_popup_container').hide();

var simple_popup_open = function () {$('#' + this.id + '_popup').fadeIn(300).wrap($("<div></div>").addClass("Simple_popup_wrapper")); };
$('.simple_popup_close').click(function () {$('.simple_popup_container').hide().unwrap(); });

// Please add your popup id here
$("#popup2, #popup1").click(simple_popup_open);

});

</script>

如何在jQuery中创建超轻模式？

2 个答案: