1. 首页
  2. 问答
  3. 专注于一个div和模糊区域aound div像模态

专注于一个div和模糊区域aound div像模态

2016-08-11 58 views

回答

0

使用jQuery dialog()，就像从jQueryUI网站采取了下面的代码，你可以找到here：

$(function() { 
 
    var dialog, form, 
 

 
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29 
 
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, 
 
    name = $("#name"), 
 
    email = $("#email"), 
 
    password = $("#password"), 
 
    allFields = $([]).add(name).add(email).add(password), 
 
    tips = $(".validateTips"); 
 

 
    function updateTips(t) { 
 
    tips 
 
     .text(t) 
 
     .addClass("ui-state-highlight"); 
 
    setTimeout(function() { 
 
     tips.removeClass("ui-state-highlight", 1500); 
 
    }, 500); 
 
    } 
 

 
    function checkLength(o, n, min, max) { 
 
    if (o.val().length > max || o.val().length < min) { 
 
     o.addClass("ui-state-error"); 
 
     updateTips("Length of " + n + " must be between " + 
 
     min + " and " + max + "."); 
 
     return false; 
 
    } else { 
 
     return true; 
 
    } 
 
    } 
 

 
    function checkRegexp(o, regexp, n) { 
 
    if (!(regexp.test(o.val()))) { 
 
     o.addClass("ui-state-error"); 
 
     updateTips(n); 
 
     return false; 
 
    } else { 
 
     return true; 
 
    } 
 
    } 
 

 
    function addUser() { 
 
    var valid = true; 
 
    allFields.removeClass("ui-state-error"); 
 

 
    valid = valid && checkLength(name, "username", 3, 16); 
 
    valid = valid && checkLength(email, "email", 6, 80); 
 
    valid = valid && checkLength(password, "password", 5, 16); 
 

 
    valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter."); 
 
    valid = valid && checkRegexp(email, emailRegex, "eg. [email protected]"); 
 
    valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 
 

 
    if (valid) { 
 
     $("#users tbody").append("<tr>" + 
 
     "<td>" + name.val() + "</td>" + 
 
     "<td>" + email.val() + "</td>" + 
 
     "<td>" + password.val() + "</td>" + 
 
     "</tr>"); 
 
     dialog.dialog("close"); 
 
    } 
 
    return valid; 
 
    } 
 

 
    dialog = $("#dialog-form").dialog({ 
 
    autoOpen: false, 
 
    height: 400, 
 
    width: 350, 
 
    modal: true, 
 
    buttons: { 
 
     "Create an account": addUser, 
 
     Cancel: function() { 
 
     dialog.dialog("close"); 
 
     } 
 
    }, 
 
    close: function() { 
 
     form[0].reset(); 
 
     allFields.removeClass("ui-state-error"); 
 
    } 
 
    }); 
 

 
    form = dialog.find("form").on("submit", function(event) { 
 
    event.preventDefault(); 
 
    addUser(); 
 
    }); 
 

 
    $("#create-user").button().on("click", function() { 
 
    dialog.dialog("open"); 
 
    }); 
 
});
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
table { 
 
    font-size: 1em; 
 
} 
 
.ui-draggable, 
 
.ui-droppable { 
 
    background-position: top; 
 
} 
 
label, 
 
input { 
 
    display: block; 
 
} 
 
input.text { 
 
    margin-bottom: 12px; 
 
    width: 95%; 
 
    padding: .4em; 
 
} 
 
fieldset { 
 
    padding: 0; 
 
    border: 0; 
 
    margin-top: 25px; 
 
} 
 
h1 { 
 
    font-size: 1.2em; 
 
    margin: .6em 0; 
 
} 
 
div#users-contain { 
 
    width: 350px; 
 
    margin: 20px 0; 
 
} 
 
div#users-contain table { 
 
    margin: 1em 0; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
div#users-contain table td, 
 
div#users-contain table th { 
 
    border: 1px solid #eee; 
 
    padding: .6em 10px; 
 
    text-align: left; 
 
} 
 
.ui-dialog .ui-state-error { 
 
    padding: .3em; 
 
} 
 
.validateTips { 
 
    border: 1px solid transparent; 
 
    padding: 0.3em; 
 
}
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<div id="dialog-form" title="Create new user"> 
 
    <p class="validateTips">All form fields are required.</p> 
 

 
    <form> 
 
    <fieldset> 
 
     <label for="name">Name</label> 
 
     <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all"> 
 
     <label for="email">Email</label> 
 
     <input type="text" name="email" id="email" value="[email protected]" class="text ui-widget-content ui-corner-all"> 
 
     <label for="password">Password</label> 
 
     <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all"> 
 

 
     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
 
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
 
    </fieldset> 
 
    </form> 
 
</div> 
 

 

 
<div id="users-contain" class="ui-widget"> 
 
    <h1>Existing Users:</h1> 
 
    <table id="users" class="ui-widget ui-widget-content"> 
 
    <thead> 
 
     <tr class="ui-widget-header "> 
 
     <th>Name</th> 
 
     <th>Email</th> 
 
     <th>Password</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John Doe</td> 
 
     <td>[email protected]</td> 
 
     <td>johndoe1</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<button id="create-user">Create new user</button>

来源

2016-08-11 20:58:13

+0

“......模糊区域......” – showdev

+0

@showdev我明白你的意思了，谢谢指出。我刚刚更新了我的答案。这次模态对话框出现时，周围区域变灰。 –

+0

感谢您的更新！很好的例子。我认为OP正在寻找实际[模糊背景]（https://codepen.io/chrisyap/pen/HCjzL）内容，但我可能会误解。 – showdev

1

的StackOverflow是不编码服务。不过，这很有趣，所以我想我会玩一下。传统上你应该自己尝试这个然后问你是否有问题，显示你的工作。在大多数情况下，如果您无法证明您至少试图自己解决问题，您不应该指望其他人为您编写代码。

所有这一切被写入.....

你可以使用clone()复制想要的对焦区域，然后覆盖上原来的容器的其余部分。然后模糊容器。这样clone()不会被模糊所改变。

$('div').on('click', function() { 
 

 
var theDiv = $(this).attr('id'); //the ID of the div to focus 
 
var theText = $(this).text(); 
 
var position = $(this).position(); //gets current position of focus div 
 
    \t 
 
if ($('.popped').is(':visible')) { 
 

 
\t \t $('.popped').fadeOut(500); //remove clone if it's visible 
 
    
 
\t \t } else { 
 
    
 
    $(this).clone().addClass('popped') //clone the target 
 
    \t .appendTo("body").css({ //move clone into position 
 
    \t \t left: position.left, 
 
    \t \t top: position.top 
 
    \t \t }) 
 
     .text(theText + ' :: left: ' + position.left + ', Top: ' + position.top); 
 
     
 
    } 
 
    
 
$('#wrap').toggleClass('blurred'); //blur the main container 
 
});
body { background: #ddd; } 
 
#wrap { 
 
    position: relative; 
 
    margin: 10px; 
 
    text-align: center; 
 
    width: 500px; 
 
    transition: all .4s; 
 
} 
 

 
div { 
 
    position: relative; 
 
    margin: 5px auto; 
 
    background: #fff; 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    border: 1px solid #aaa; 
 
    text-transform: uppercase; 
 
    font-weight: bolder; 
 
    width: 100%; 
 
} 
 

 

 
    .popped { 
 
    position: absolute; 
 
    z-index: 5000; 
 
    width: 500px; /* same width ans main container (or original div) */ 
 
    margin: 15px 18px; /* compensates for blur -- blur distance times 2 */ 
 
    } 
 
    
 
    
 
    .blurred { 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    opacity: 0.5; 
 
    transition: all .4s; 
 
    } 
 
    
 

 
h3 { text-align: center; font-weight: normal; text-transform: uppercase; font-size: 0.7em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="wrap" class=""> 
 
<div id="one">First div</div> 
 
<div id="two">This is number 2</div> 
 
<div id="three">A third Div</div> 
 
<div id="four">4th and final</div> 
 
    <h3>Click a row to focus on it</h3> 
 
</section>

这读取被点击，并克隆了一个DIV，并在视口内的类似位置的克隆的立场，即div的ID。你可以很容易地改变这个以使用按钮点击或其他事件。

这显然是需要一些调整为每种情况，但总体来说这种方法可能工作。

来源

2016-08-12 17:55:33 Scott

相关问题

 相关问题