如何在弹出窗口中插入关闭按钮答案

【问题标题】：How do I insert a close button inside my popup如何在弹出窗口中插入关闭按钮
【发布时间】：2015-02-26 14:16:35
【问题描述】：

我正在使用 b.popup 生成一个弹出窗口，我想在弹出窗口中包含一个关闭按钮“x”但它不起作用。

我使用它如下：我没有安装 jquery，因此我必须使用以下脚本头

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="jquery.bpopup-x.x.x.min.js"></script>
<script>

这是主脚本：

(function($) 
{
    $(function() 
    {
        /*Popup for Details Button*/
        $('#btndetails').bind('click', function(e)
        {
            // Prevents the default action to be triggered. 
                e.preventDefault();
        $("#element_to_pop_up").html("Some text");
                $('#element_to_pop_up').bPopup();
        }
 });

})(jQuery);

这是html按钮：

<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
</div>

这是 CSS：

#element_to_pop_up
{ 
   background-color:#fff;
   border-radius:15px;
   color:#000;
   display:none; 
   padding:20px;
   min-width:400px;
   min-height: 180px;
}

我目前收到一个弹出窗口，为了关闭弹出窗口，我需要在弹出窗口外部单击。如何使用关闭按钮工作？请帮我。

【问题讨论】：

如果我删除上面发布的任何 js 库，我的弹出窗口将无法正常工作

标签： javascript jquery html css popup

【解决方案1】：

您正在使用 Jquery 覆盖 html，因此关闭按钮的 span 类正在消除。

http://jsfiddle.net/o9qoma1b/3/

看到这个小提琴我已经修复了你的代码。希望它可以帮助你

css:

    #element_to_pop_up
    { 
       background-color:#fff;
       border-radius:15px;
       color:#000;
       display:none; 
       padding:20px;
       min-width:400px;
       min-height: 180px;
    }
    span.button.b-close {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor:pointer;
    }

HTML：

<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
  <span class="button b-close"><span>X</span></span>
</div>

JS：

(function($) 
    {
               /*Popup for Details Button*/
            $('#btndetails').bind('click', function(e)
            {
                // Prevents the default action to be triggered. 
                    e.preventDefault();               
                    $('#element_to_pop_up').bPopup();
                    var html = $("#element_to_pop_up").html();
                    $("#element_to_pop_up").html(html+ "Some text");
            });  

    })(jQuery);

【讨论】：

使用你的代码后，我得到了关闭按钮，但现在的问题是每当我点击详细信息按钮时，值就会重复，就像我点击详细信息 n 关闭它 n 再次打开它给出“一些文字两次”

【解决方案2】：

将此添加到您的 HTML 中，如果可能，还包括最新的 JQuery。关闭

<a href="#" data-rel="back" data-role="button" data-theme="a" id="close-sub-cancel" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

【讨论】：

【解决方案3】：

试试这样的。

function closeMsg()
	{
		$("msgBox").fadeOut();
	}

<div id="msgBox">
	<a href="javascript:closeMsg();" class="btn btn-success">No Thanks</a>
</div>

【讨论】：