Question

我正在使用b.popup生成弹出窗口，我想要包含一个关闭按钮＆＃34; x＆＃34;在弹出窗口内但它不起作用。

我使用它如下：我没有安装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;
}

我目前正在获取弹出窗口，并且为了关闭我需要在弹出窗口外单击的弹出窗口。如何使用关闭按钮工作？请帮我。

Answer 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);

Answer 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>

Answer 3

尝试这样的事情。

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

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

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

3 个答案: