如何添加樣式表來確認框？

Question

<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> 
    <span class="glyphicon glyphicon-trash"></span> 
</button> 

我想這個<div class="box box-solid box-success">...</div>代碼附加到我的確認框。我嘗試了幾種方法，但沒有成功。我使用Laravel 5和Blade模板來執行此代碼。

PLZ，這個問題是輸精管，因爲我用於編碼使用刀片的模板格式larave 5 PHP framework.I。所以，我用這個語法。

<p id='buttons'> 
      {!! Form::submit('Update', ['class' => 'btn btn-primary','onclick'=>'return confirm("Are you sure?")']) !!} &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
      {!! Form::button('Cancel', ['class' => 'btn btn-default']) !!} 

     </p> 

Answer 1

如果使用的是引導，我更喜歡你應該使用自舉的模態 http://getbootstrap.com/javascript/#modals

或者，如果你想輕鬆地使用引導的模式，你可以使用bootbox： http://bootboxjs.com/

它有示例關於如何在示例中使用確認模式

Answer 2

HTML：

<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> 
    <span class="glyphicon glyphicon-trash"></span> 
</button> 

CSS：

#modalContainer { 
    background-color:rgba(0, 0, 0, 0.3); 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0px; 
    left:0px; 
    z-index:10000; 
    background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */ 
} 

#alertBox { 
    position:relative; 
    width:300px; 
    min-height:100px; 
    margin-top:50px; 
    border:1px solid #666; 
    background-color:#fff; 
    background-repeat:no-repeat; 
    background-position:20px 30px; 
} 

#modalContainer > #alertBox { 
    position:fixed; 
} 

#alertBox h1 { 
    margin:0; 
    font:bold 0.9em verdana,arial; 
    background-color:#3073BB; 
    color:#FFF; 
    border-bottom:1px solid #000; 
    padding:2px 0 2px 5px; 
} 

#alertBox p { 
    font:0.7em verdana,arial; 
    height:50px; 
    padding-left:5px; 
    margin-left:55px; 
} 

#alertBox #closeBtn { 
    display:block; 
    position:relative; 
    margin:5px auto; 
    padding:7px; 
    border:0 none; 
    width:70px; 
    font:0.7em verdana,arial; 
    text-transform:uppercase; 
    text-align:center; 
    color:#FFF; 
    background-color:#357EBD; 
    border-radius: 3px; 
    text-decoration:none; 
} 

/* unrelated styles */ 

#mContainer { 
    position:relative; 
    width:600px; 
    margin:auto; 
    padding:5px; 
    border-top:2px solid #000; 
    border-bottom:2px solid #000; 
    font:0.7em verdana,arial; 
} 

h1,h2 { 
    margin:0; 
    padding:4px; 
    font:bold 1.5em verdana; 
    border-bottom:1px solid #000; 
} 

code { 
    font-size:1.2em; 
    color:#069; 
} 

#credits { 
    position:relative; 
    margin:25px auto 0px auto; 
    width:350px; 
    font:0.7em verdana; 
    border-top:1px solid #000; 
    border-bottom:1px solid #000; 
    height:90px; 
    padding-top:4px; 
} 

#credits img { 
    float:left; 
    margin:5px 10px 5px 0px; 
    border:1px solid #000000; 
    width:80px; 
    height:79px; 
} 

.important { 
    background-color:#F5FCC8; 
    padding:2px; 
} 

code span { 
    color:green; 
} 

JAVASCRIPT：

var ALERT_TITLE = "Oops!"; 
var ALERT_BUTTON_TEXT = "Ok"; 

if(document.getElementById) { 
    window.confirm = function(txt) { 
     createCustomConfirm(txt); 
    } 
} 

function createCustomConfirm(txt) { 
    d = document; 

    if(d.getElementById("modalContainer")) return; 

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); 
    mObj.id = "modalContainer"; 
    mObj.style.height = d.documentElement.scrollHeight + "px"; 

    confirmObj = mObj.appendChild(d.createElement("div")); 
    confirmObj.id = "alertBox"; 
    if(d.all && !window.opera) confirmObj.style.top = document.documentElement.scrollTop + "px"; 
    confirmObj.style.left = (d.documentElement.scrollWidth - confirmObj.offsetWidth)/2 + "px"; 
    confirmObj.style.visiblity="visible"; 

    h1 = confirmObj.appendChild(d.createElement("h1")); 
    h1.appendChild(d.createTextNode(ALERT_TITLE)); 

    msg = confirmObj.appendChild(d.createElement("p")); 
    //msg.appendChild(d.createTextNode(txt)); 
    msg.innerHTML = txt; 

    btn = confirmObj.appendChild(d.createElement("a")); 
    btn.id = "closeBtn"; 
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); 
    btn.href = "#"; 
    btn.focus(); 
    btn.onclick = function() { removeCustomConfirm();return false; } 

    confirmObj.style.display = "block"; 

} 

function removeCustomConfirm() { 
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); 
}