Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
402 views
in Technique[技术] by (71.8m points)

css - Simple modal div in jQuery?

I have tried almost all of the jQuery Modal plugins I can find on the net but they are all much to bulky for what I need. I don't need all the fancy features, I want to be able to open a div and have the background of the page go transparent grey like the photo below and have my div be on top of it, that is all I need to do so I would like to write some jQuery to do this instead of using a bulky plugin. Does anyone have any small code that can do this task? Is the transparent background an image or just CSS?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This is what I use myself; it looks nice, the code is simple and easy to understand, and uses minimal CSS and jQuery.

Here is the code (And a fiddle to see it in action: http://jsfiddle.net/cadkJ/125/):

HTML

<h1>Bacon ipsum dolor sit amet</h1>

<p>Magna adipisicing eu, pig ex pariatur non biltong nisi consequat do exercitation. Biltong exercitation consequat aute. Excepteur velit ribeye, et salami pariatur sed consequat enim ham. Tenderloin consequat et, in pastrami aute meatloaf beef spare ribs tri-tip beef ribs sed ut jerky strip steak. Fugiat turkey shank frankfurter pork loin pastrami.</p>

<button id="modal-launcher">Launch Modal Window</button>

<div id="modal-background"></div>
<div id="modal-content">
    <button id="modal-close">Close Modal Window</button>
</div>?

CSS

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 240px;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1000;
}

#modal-background.active, #modal-content.active {
    display: block;
}?

jQuery

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

Do you want to lock scrolling?

Add the following CSS rule:

body.active { position: fixed; overflow: hidden; }

Replace the jQuery function with: (body added to line 3)

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("body, #modal-content, #modal-background").toggleClass("active");
    });
});

Do you want to prevent click events on the background from closing the modal?

Replace the jQuery function with: (#modal-background removed from line 2)

$(function(){
    $("#modal-launcher, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...