如何使用jQuery生成一个简单的弹出框

238

东西这个简单的不需要插件。这可能看起来像很多代码，但它非常简单。

首先CSS - 调整这个，只要你喜欢：

a.selected { 
    background-color:#1F75CC; 
    color:white; 
    z-index:100; 
} 

.messagepop { 
    background-color:#FFFFFF; 
    border:1px solid #999999; 
    cursor:default; 
    display:none; 
    margin-top: 15px; 
    position:absolute; 
    text-align:left; 
    width:394px; 
    z-index:50; 
    padding: 25px 25px 20px; 
} 

label { 
    display: block; 
    margin-bottom: 3px; 
    padding-left: 15px; 
    text-indent: -15px; 
} 

.messagepop p, .messagepop.div { 
    border-bottom: 1px solid #EFEFEF; 
    margin: 8px 0; 
    padding-bottom: 8px; 
}

和JavaScript：

function deselect(e) { 
    $('.pop').slideFadeToggle(function() { 
    e.removeClass('selected'); 
    });  
} 

$(function() { 
    $('#contact').on('click', function() { 
    if($(this).hasClass('selected')) { 
     deselect($(this));    
    } else { 
     $(this).addClass('selected'); 
     $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#contact')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
};

最后的HTML：

<div class="messagepop pop"> 
    <form method="post" id="new_message" action="/messages"> 
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p> 
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p> 
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p> 
    </form> 
</div> 

<a href="/contact" id="contact">Contact Us</a>

Here is a jsfiddle demo and implementation.

根据情况，您可能需要通过ajax调用加载弹出窗口内容。如果可能的话，最好避免这种情况，因为在看到内容之前，它可能会给用户带来更大的延迟。如果采取这种方法，这里就会有一些你想做的改变。

HTML变为：

<div> 
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a> 
</div>

和JavaScript的总体思路变为：

$("#contact").on('click', function() { 
    if($(this).hasClass("selected")) { 
     deselect();    
    } else { 
     $(this).addClass("selected"); 
     $.get(this.href, function(data) { 
      $(".pop").html(data).slideFadeToggle(function() { 
       $("input[type=text]:first").focus(); 
      }); 
     } 
    } 
    return false; 
});

来源

2009-08-25 17:03:51

+0

其工作，谢谢。但即时通讯将包括另一个按钮通话记录。当它被点击时，注册表单应该弹出。为此，我包含了相同的功能并更改了ID和类的名称。问题是当我点击注册表单的关闭按钮时，它会切换联系表单。需要帮助@jason戴维斯 – Rajasekar 2009-08-26 07:51:37

+1

删除您在关闭更改添加close方法HTML以 $（ “亲密 ”）。住（ '点击'，函数（）{ \t \t \t $（“ 弹出”） .slideFadeToggle（）; \t \t \t $（ “＃接触”）removeClass（ “选择”）; \t \t \t $（ “流行”。）删除（）; //添加这个... \t \t \t return false; \t \t \t}）; 这将解决您在关闭弹出窗口之前多次点击链接时所得到的问题。不错的答案的方式，光滑和简单... – Jonx 2010-05-25 23:10:36

+21

实施：http：// jsfiddle。net/B4t3V/ – Yahel 2010-11-11 02:04:56

94

结账jQuery UI Dialog。你会使用这样的：

jQuery的：

$(document).ready(function() { 
    $("#dialog").dialog(); 
});

的标记：

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

完成！

请记住，这是关于最简单的用例，我建议您阅读documentation以更好地了解可以采取的措施。

来源

2009-08-25 14:38:56 karim79

+0

除了Jquery，我是否需要包含任何插件？ @Karim – Rajasekar 2009-08-25 14:55:29

+6

@Rajasekar - 您需要下载jQuery UI包，至少包括ui.core.js和ui.dialog.js才能获得对话。如果您希望对话可以拖动和/或调整大小，那么您需要包含ui.draggable.js和ui.resizable.js。 – karim79 2009-08-25 15:00:14

+5

嗯。与jsfiddle会更好的答案。 – Bryce 2014-01-02 01:04:37

3

有恰好一个很好的，简单的例子，在这里：http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

来源

2009-08-25 14:44:08 Evernoob

+0

除了jquery，我是否需要包含任何插件？ @Karim – Rajasekar 2009-08-25 14:52:35

23

我用一个jQuery插件叫做ColorBox，它是

非常好用
轻巧
定制
最好的弹出对话框我见过的jQuery但

来源

2009-08-25 17:05:57 JasonDavis

8

访问以下网址

Jquery UI Dialog Demos

来源

2012-03-03 01:00:22 Yanni

4

我觉得这是在写一个简单的jQuery弹出一个great tutorial。加上它看起来很beautiful

来源

2012-07-27 09:03:17

8

尝试Magnific Popup，它的响应和重量只有3KB左右。

来源

2013-05-24 16:10:59 Marvin3

0

这是一个非常简单的弹出：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      #modal { 
       position:absolute; 
       background:gray; 
       padding:8px; 
      } 

      #content { 
       background:white; 
       padding:20px; 
      } 

      #close { 
       position:absolute; 
       background:url(close.png); 
       width:24px; 
       height:27px; 
       top:-7px; 
       right:-7px; 
      } 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
      var modal = (function(){ 
       // Generate the HTML and add it to the document 
       $modal = $('<div id="modal"></div>'); 
       $content = $('<div id="content"></div>'); 
       $close = $('<a id="close" href="#"></a>'); 

       $modal.hide(); 
       $modal.append($content, $close); 

       $(document).ready(function(){ 
        $('body').append($modal);      
       }); 

       $close.click(function(e){ 
        e.preventDefault(); 
        $modal.hide(); 
        $content.empty(); 
       }); 
       // Open the modal 
       return function (content) { 
        $content.html(content); 
        // Center the modal in the viewport 
        $modal.css({ 
         top: ($(window).height() - $modal.outerHeight())/2, 
         left: ($(window).width() - $modal.outerWidth())/2 
        }); 
        $modal.show(); 
       }; 
      }()); 

      // Wait until the DOM has loaded before querying the document 
      $(document).ready(function(){ 
       $('a#popup').click(function(e){ 
        modal("<p>This is popup's content.</p>"); 
        e.preventDefault(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <a id='popup' href='#'>Simple popup</a> 
    </body> 
</html>

更灵活的解决方案可以在本教程中找到：http://www.jacklmoore.com/notes/jquery-modal-tutorial/ 这里的close.png的样品。

来源

2013-10-12 20:31:20 John29

3

非常轻量级的模态弹出式插件。 POPELT - http://welbour.com/labs/popelt/

它是轻量级的，支持嵌套弹出窗口，面向对象，支持动态按钮，响应式等等。下一次更新将包括弹出Ajax表单提交等。

随意使用和推特反馈。

来源

2013-10-14 19:36:30

1

通过使用html5和javascript简单的弹出窗口。

HTML： -

<dialog id="window"> 
    <h3>Sample Dialog!</h3> 
    <p>Lorem ipsum dolor sit amet</p> 
    <button id="exit">Close Dialog</button> 
    </dialog> 

    <button id="show">Show Dialog</button>

的JavaScript： -

(function() { 

      var dialog = document.getElementById('window'); 
      document.getElementById('show').onclick = function() { 
       dialog.show(); 
      }; 
      document.getElementById('exit').onclick = function() { 
       dialog.close(); 
      }; 
     })();

来源

2016-06-04 09:55:50

+0

我得到一个TypeError：dialog.show不是函数错误。你可以请一个JSFiddle吗？ – Magiranu 2017-11-03 10:33:06

-1

ONLY CSS POPUP逻辑！试试吧。简单！我认为这mybe在未来

  <a href="#openModal">OPEN</a> 

      <div id="openModal" class="modalDialog"> 
       <div> 
        <a href="#close" class="close">X</a> 
        <h2>MODAL</h2> 

       </div> 
      </div> 


.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    display: none; 
    pointer-events: none; 
} 

.modalDialog:target { 
    display: block; 
    pointer-events: auto; 
} 

.modalDialog > div { 
    width: 400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
}

来源

2016-11-25 07:57:37 zloctb

+0

它不关闭！ – vy32 2016-12-22 15:58:32

如何使用jQuery生成一个简单的弹出框

回答

相关问题