Question

如何在显示对话框时禁用背景并使其模糊 addClass（“blur”）对此没有任何影响。 warapper是包含整个代码的div，除了对话框的代码

<div id="dialog-box" class="dialog-box">

   <form id="dialog-box1"  class="login_form">
    <a href="#" id="close" class="close" style="float:right;margin:8px;margin-top:0px;color:white;text-decoration:none">x</a>
  <h1 style="color:white">Log in</h1>
  <div class="inset">
  <p>
    <label class="label" for="email">EMAIL ADDRESS</label>
    <input class="input" type="text" name="email" id="email">
  </p>
  <p>
    <label class="label" for="password">PASSWORD</label>
    <input class="input" type="password" name="password" id="password">
  </p>
  <p>
    <input class="input" type="checkbox" name="remember" id="remember">
    <label class="label" for="remember">Remember me</label>

       <a href="" ><img class="login_with" src="images/fb.png"></a> 
       <a href="" ><img class="login_with" id="gp" src="images/gp.png"></a>
  </p>
  </div>

  <p class="p-container">
    <span>Forgot password ?</span>
    <input class="input" type="submit" name="go" id="go" value="Log in">
  </p>
  <a href="" style="float:right"><img src="images/fb.png"></a>  <a href="" style="float:right"><img src="images/fb.png"></a>
  <p>

  </p>

    <script type="text/javascript">
    $(document).ready(function() {
  $('#dialog-box').hide();
  $('#login_button').click(function() {
    $("#dialog-box").addClass('blur');
    $('#dialog-box').show(); 
  });

 $('#close').click(function() {
    $('#dialog-box').hide();
    $('.wrapper').removeClass('blur');
    });
})
</form>
</div>

Answer 1

您可以使用以下jquery创建模型弹出窗口窗口：

function ShowDialog(divID, width, height) {
$("#" + divID).dialog({
    autoOpen: true,
    height: height,
    width: width,
    show: "fade",
    hide: "fade",
    modal: true
});
}

你必须通过DIV的高度，宽度和宽度。标题显示。属性modal: true使其他空间无法点击。

如何在出现对话框时禁用背景

1 个答案: